1.jquery 要在 bootstrap 之前引用;
2.<meta http-equiv = "X-UA-Compatible" content="IE=edge"> (在 IE 运行最新的渲染模式);
3.<meta name = "viewport" content = "width = device-width , initial-scale = 1"> (初始化移动浏览显示);
4.<link href = "css/bootstrap.min.css" rel = ''stylesheet'> (载入Bootstrap的CSS样式);
5.每个row 代表一行,要写col 必须在此之前嵌套一个row (可不用设置row的样式);
6.container 默认边距有15px 会留白 解决方法:(在container 内设置padding-left:0; padding-right:0; 填充留白部分);
7.基于最小的屏幕col-xs-12编写会方便很多;
8.bootstrap <small> 标签制作副标题;
9.添加类名“.lead” 突出显示文字 (作用增大文本字号,加粗文本,对行高和margin做了相应的处理);
10.添加类名“.table” 设置表格 添加“table-hover“ 设置鼠标悬停高亮,颜色可在源码bootstrap.css文件中第1469行~1472行查看、更改;
11.添加类名‘’.table-condensed‘’ 紧凑表格 ;
12.所有的table元素前都应加上类名table 后再跟需要设置的样式;
13.带边框的表格 添加类名 ‘’.table-bordered‘’;
14.在table外层div中添加class="table-reponsive" 设置响应式表格;
15.multiple 下拉菜单滚动条;
16.添加类名“form-control” 设置文本框样式 颜色为#ccc;
17.表单控件(复选框和单选按钮水平排列) role="form";
18.添加input-lg 控件变大、文本 添加input-sm 控件变小、文本;
19.禁止输入 <fieldset disabled></fieldset>;
20.has-success has-feedback(显示同一行) <span class="glyphicon glyphicon-ok form-control-feedback"></span> (图标) 成功状态(包括文本框颜色为绿色加图标);
has-warning has-feedback (显示同一行) <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> (图标) 警告状态(包括文本框颜色为黄色加图标);
has-error has-feedback (显示同一行) <span class="glyphicon glyphicon-remove form-control-feedback"></span> (图标) 错误状态(包括文本框颜色为红色);
21.class = "btn" 属性多标签支持 例:<input> <span> <div> 标签都可以;
22.cursor:not-allowed 静止鼠标图标;
23.class="btn-block" 块级变行级 加上disabled 启动禁用样式;
24.响应式布局结构:<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-6">
</div>
</div>
25.图标引用:
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>
26.布局:列向右移动四列的间距 col-sm-offset-4 ;
列向右移动八列的间距 col-sm-push-8 ;
列向左移动四列的间距 col-sm-pull-4 ;
27.嵌套网格:还要写个row 默认为12格;
28.class=“caret” 下拉菜单的的图标,并排显示;
data-toggle = "dropdown" 下拉显示菜单;
29.class="divider" 下拉菜单分割线;
30.class="dropdown-header" 突出头部,会缩小文本,颜色为#ccc;
31.使用pull-right类使下拉菜单与父容器右边对齐;
使用dropdown-menu-right类使下拉菜单与父容器右边对齐;
32.class="dropdown-menu" 下拉菜单;
33.class="btn-group-vertical" 下拉菜单垂直排列;
34.class="btn-group" 菜单与菜单之间的间隙缝合;
35.<div class="btn-group btn-group-justified"> 几个菜单平均分布;
36.按钮下拉菜单:
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>
37.添加.dropup 让三角形变成倒三角;
38.nav-tabs 让li 从块级变行级 class="nav nav-tabs";
39. 添加某一个被选中的状态;
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<br />
添加某一个被禁用的状态;
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
40.class="nav nav-pills" 导航栏排列显示,行级;
41.nav-stacked 铺满整行,块级变行级 , ul li 需要搭配 a 标签使用,否则无效!
42.class="breadcrumb" 编写导航栏 效果可以自己试;
43.class="navbar navbar-default" role="navigation"
class="nav navbar-nav" 两行代码,简单大方的基础导航条;
44.按钮, 直接写button标签属性即可. 需要注意的是, 一定要在button的样式上加上.navbar-btn 这样你看到的效果才是比较美观的.
45. class="navbar-header"
class="navbar-brand 一起使用,字体放大,作为标题使用,突出显示;
46. 搜索框:
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
47.class="navbar-text" 文本自动居中;
48.class="nav navbar-nav" 鼠标移动在文字上,文字颜色有变化;
49.navbar-fixed-top 导航条固定于顶部;
navbar-fixed-bottom 导航条固定于底部;
50.导航条根据浏览器的大小而切换隐藏和显示;
<!--代码-->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div>
51.class="navbar navbar-inverse" 导航条深色背景,字体颜色为白色;
52.class="pagination pagination-lg" 分页;lg---较大的样式;
53.class="pager" 分页; 四角有弧度的样式(圆角5px左右);
54.class="badge" 设置徽章;例如:阿拉伯数字;
class="badge pull-right" 设置徽章并向右移动;
55.class="thumbnail" 图像缩略图(图像有一个外框);
56.class="caption" 排列图像在div上加入;
57. class="list-group"
class="list-group-item" 带链接的列表组; 列表项用这个定义; 后面跟颜色;比如警告:Bootstrap内定的颜色;
58.class="list-group-item-heading"
class="list-group-item-text" 自定义列表组;
class="panel-footer"
class="panel-body"
class="panel-heading" 自定义面板;父元素引用class="panel panel-default" ;
59.class="table table-bordered" 面板内嵌套表格;
60.leanModal 方法 动态模仿开发jquery 插件;
61. class="modal show" 隐藏或者显示某个模板;
62.data-target="#mymodal-data" 通过data-target来触发模态弹出框内容;
63.class="modal fade bs-example-modal-lg" 可以设置模态弹出框的大小,lg --- sm ;
64.data-keyboard="false" 通过键盘ESC来关闭弹出框;
65.data-backdrop="static" 通过点击背景关闭弹出框,默认值为true, 设置static 点击背景则不会弹出模态框;
66.弹出模态框 js 代码:
<script>
$(function(){
$(".btn").click(function(){
$("#themodal").modal('toggle')
})
})
</script>
67.keyboard:false 如果不想让用户按ESC键关闭模态弹出框,可以这样设置;
68.$(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗;
69.$(“#mymodal”).modal(“hide”) 触发时,关闭模态弹出窗;
70.$(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示;
71.模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:
show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性;
shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件;
hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发;
hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发;
调用方法:
$('#myModal').on('hidden.bs.modal', function (e) {
// 处理代码...
})