bootstrap小结
bootstrap总结
bootstrap总结
base css 我分为了几大类
1,列表
.unstyled(无样式列表),.dl-horizontal(dl列表水平排列)
2,代码
code(行级),pre(块级),.pre-scrollable(显示滚动条), 显示行号和美化: .prettyprint,.linenums
3,表格
.table(基础样式) .table-bordered(样式边框) , .table-striped(间隔效果) , .table-condensed(缩小表格)
4,表单
.from-inline(所有元素在一列) , .form-horizontal(没一横排一个表单项)
.form-horizontal -->需要结合组件:
fieldset.control-group
|
|-->label.control-label
|
|-->.controls
5,按钮
.btn(基础样式) , .btn-primary(重要,蓝色) , .btn-info(信息,浅蓝), .btn-success(成功,绿色), .btn-warning(警告,黄色) .btn-danger(危险,红色) , .btn-inverse(相反,黑色)
6,标签
.label(基础样式), .label-important(重要,红色) , .label-success(成功, 蓝色), .label-warning(警告,黄色), .label-info(信息,浅蓝色) .label-inverse(相反,黑色)
7,标记
.badge(基础样式), .badge-success(成功,绿色), .badge-warning(警告,黄色),badge-error(错误,红色), .badge-info(信息,浅蓝色)
8,警告
.alert(基础样式), .alert-success(成功,绿色), .alert-error(错误,红色), .alert-info(信息,蓝色) , .alert-block(获得更多的padding), 里面可以 .alert-heading(标题) , <a class="close" data-dismiss="alert"$amp;>amp;$amp;times;</a>(关闭按钮)
9,图标
.icon-user(用户), .icon-drash(删除), .icon-refrash(刷新), .icon-cog(齿轮) icon-white(反白)
10,手风琴
.accordion
|
|->.accordion-group
| |
| |->.accordion-heading
| | |
| | |->.accordion-toggle (data-toggle="collapse" #demo1" data-parent="#accordion2")
| |
| |->accordion-body
| | |
| | |->accordion-inner
组件。
1,导航
.navbar (.navbar-fixed-top|.navbar-fixed-bottom)
|
|-->.navbar-inner
|
|->container
|
|->brand (项目名)
|
|->ul.nav (菜单)
| |
| |->li.divider-vertical 竖分割线
|
|->form.navbar-form(搜索框)
| |
| |->search-query
|
|->.dropdown (下拉菜单)
|
|->pull-right(使元素有右浮动)
2,面包屑
ul.breadcrumb
|
|->li
|
|->a
|
|->span.divider(分割线<span class="divider">/</div>)
3,排版
(1) 主角元素
.hero-unit
|
|->h1(主标题)
|
|->p(副内容)
(2) 页面标题,有下边框
.page-header
|
|->h1
|->small
4,tab页
div.tabbable (tabs-below|tabs-left|tabs-bottom)
|
|->ul.nav (nav-tabs|nav-pills|nav-list) nav-stracked(竖立折叠式)
| |
| |->li.active
| | |
| | |->a--> #id", data-toggle="tab"
| |
| |->li.nav-header (nav-list时用,表示一个菜单头)
| |
| |->li.divider(nav-list时用,分割线)
| |
| |->li.dropdown
|
|->tab-content
| |
| |->div#id .tab-pane (active)
5,缩略列表
ul.thumbnails
|
|->li.span*
|
|->.thumbnail
|
|->(.caption) 详情描述
6,按钮组
.btn-toolbar
|
|->.btn-group
|
|->.btn
7,下拉菜单
.btn-group | .dropdown |.dropup
|
|->.btn .dropdown-toggle (data-toggle="dropdown")
| |
| |->span.caret
|
|->ul.dropdown-menu
|
|->li.divider
8,进度条
.progress (.progress-striped| .actvie)
|
|->.bar ()
9,页码
.pagination (.pagination-centered|.paginaction-right)
|
|->ul
|
|->li(.active)
javascript:
1,对话框
(1)对话框组件:
.modal (设置宽度)
|
|->.modal-header
| |
| |->.close (data-dismiss="modal") [注,.close必须放在前面]
| |
| |->h3
|
|->.modal-body
|
|->.modal-footer
| |
| |->.btn
(2)标记触发
<a #mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打开对话框</a>
(3)javascript
a)初始化:
$("#mymodal").modal({
dropback:true,
keyboard:true,
show:true
});
b) 触发
$("#mymodal").modal(
bootstrap小结的更多相关文章
- Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...
- bootStrap小结3
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结2
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Node.js + Express 构建的订餐系统
Node.js的版本 - v0.8.12 Express的版本 – v3.3.3 (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...
- 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
随机推荐
- StringBuilder 大量字符串时使用,速度比较快
public static void Main(string[] args) { Stopwatch sw = new Stopwatch(); //程序计时器 StringBuilder str = ...
- ecstore生成二维码
利用phpqrcode库生成二维码: /* *二维码添加 */ ////////////////////////////////////// /*引入文件*/ @include(APP_DIR.'/i ...
- JS判断手机端和PC端自动跳转
<script type="text/javascript"> function browserRedirect() { var sUserAgent ...
- [POJ] 2239 Selecting Courses(二分图最大匹配)
题目地址:http://poj.org/problem?id=2239 Li Ming大学选课,每天12节课,每周7天,每种同样的课可能有多节分布在不同天的不同节.问Li Ming最多可以选多少节课. ...
- js运算符的优先级
自上向下优先级降低 运算符 描述 . [] () 字段访问.数组下标.函数调用以及表达式分组 ++ -- - ~ ! delete new typeof void 一元运算符.返回数据类型.对象创建. ...
- Bloglines订阅Blog部落格RSS网摘 - Blog透视镜
网络信息蓬勃发展,Blog部落格越来越普及,如果逐一地去浏览网站,势必费时费力,倘若信息可以自己送上门,那就可以节省不少时间,就好像看报纸的标题,有兴趣才点连结,进到网站浏览文章内容,Blogline ...
- 基于AForge.Net框架的扑克牌识别
原文:基于AForge.Net框架的扑克牌识别 © 版权所有 野比 2012 原文地址:点击查看 作者:Nazmi Altun Nazmi Altun著,野比 译 下载源代码 - 148.61 KB ...
- ASP.NET WEB API 如何使用基于Post的方式传递多个值(二)
前面我曾经写过一篇文章,是基于HttpContext的请求上下文中读取表单参数,其实还可以将其单独拆分出来. 基于Filter的方式 获取表单值:(核心代码) public void OnActi ...
- Linux生成core文件、core文件路径设置
在Linux下产生并调试core文件 先看看我用的是个什么机器: $ uname -aLinux dev 2.4.21-9.30AXsmp #1 SMP Wed May 26 23:37:09 EDT ...
- jQuery中ajax的使用和缓存问题解决 $getjson 与$get都会被IE缓存
原文地址:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324842.html 1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL ...