入门bootstrap

阅读量：5024 次

发布时间：2019-06-12

本文共 31502 字，大约阅读时间需要 105 分钟。

role是一个html5的属性，role="form"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button中role="button"就是告诉设备，这是个按钮，可以点击。

本质上是增强语义性，增强组件的可访问性、可用性和可交互性。

一、排版

大标题

解析：

1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。

2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。

3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

副标题

解析：

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。

2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%

段落（正文文本）

解析：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）,该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}

p { margin: 0 0 10px;} 根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。

LESS版本：

@font-size-base: 14px; //设置字体大小 @line-height-base: 1.428571429; // 20/14 //设置行高

Sass版本：

$font-size-base: 14px !default; //设置字体大小 $line-height-base: 1.428571429 !default; // 20/14 //设置行高 1.21强调内容

类名lead

.lead {margin-bottom: 20px;font-size: 16px;font-weight: 200;line-height: 1.4;}@media (min-width: 768px) {/*大中型浏览器字体稍大*/.lead {font-size: 21px;  }} 元素标签:、、和

b,strong {  font-weight: bold; /*文本加粗*/}

small,.small {  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/}

cite {font-style: normal;}

加粗

font-weight:blold;

b,strong {  font-weight: bold; /*文本加粗*/} 斜体 font-weight：italic； i,em{
  font-weight:italic; } 颜色强调（hover颜色加深）

.text-muted {color: #999; //浅灰色}.text-primary {color: #428bca;//蓝色}a.text-primary:hover {color: #3071a9;}.text-success {color: #3c763d;//浅绿色}a.text-success:hover {color: #2b542c;}.text-info {color: #31708f;//浅蓝色}a.text-info:hover {color: #245269;}.text-warning {color: #8a6d3b;}a.text-warning:hover {color: #66512c;}.text-danger {color: #a94442; //褐色}a.text-danger:hover {color: #843534;} 文本对齐风格（考虑到各浏览器解析不一样，尤其是中文项目，慎用）

.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}

1.4列表(六种形式)

1 普通列表

2 有序列表

不嵌套

ul,ol {  margin-top: 0;  margin-bottom: 10px;} 嵌套ul ul,ol ul,ul ol,ol ol {  margin-bottom: 0;}

3 去点列表

.list-unstyled {padding-left: 0;list-style: none;}

4 内联列表(把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示--->水平制表)

.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}

5 描述列表

定义列表(调整了行间距，外边距和字体加粗效果)

dl {margin-top: 0;margin-bottom: 20px;}dt,dd {line-height: 1.42857143;}dt {font-weight: bold;}dd {margin-left: 0;}

6 水平描述列表

解析：

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式： 1、将dt设置了一个左浮动，并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px，达到水平的效果 3、当标题宽度超过160px时，将会显示三个省略号

@media (min-width: 768px) {.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;//显示省略号来代表被修剪的文本white-space: nowrap;//处理元素内空白，此处为不换行直到遇到
  }.dl-horizontal dd {margin-left: 180px;  }} 1.5代码(不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。) 1、使用来显示单行内联代码 2、使用
来显示多行块代码 可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条

.pre-scrollable {max-height: 340px;overflow-y: scroll;}

3、使用来显示用户输入代码 表格(Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格)

1.6表格

在<tr>元素中添加上表对应的类名

特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态，需要在<table>标签上加入table-hover类。

☑ .table：基础表格（.table）

“.table”主要有三个作用：

给表格设置了margin-bottom:20px以及设置单元内距

在thead底部设置了一个2px的浅灰实线

每个单元格顶部设置了一个1px的浅灰实线

☑ .table-striped：斑马线表格(.table .table-striped)

CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。

.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background-color: #f9f9f9;}

☑ .table-bordered：带边框的表格(.table .table-bordered)

.table-bordered {  border: 1px solid #ddd;/*整个表格设置边框*/}.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td {  border: 1px solid #ddd; /*每个单元格设置边框*/}.table-bordered > thead > tr > th,.table-bordered > thead > tr > td {  border-bottom-width: 2px;/*表头底部边框*/}

☑ .table-hover：鼠标悬停高亮的表格(.table .table-hover)

.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th {background-color: #f5f5f5;}

☑ .table-condensed：紧凑型表格(.table .table-condensed)

就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值只是将单元格的内距由8px调至5px

☑ .table-responsive：响应式表格

当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”

在table的外一个容器

二、表单

2.1基础表单（3种）1fieldset {

min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: inline-block;margin-bottom: 5px;font-weight: bold;} 1基础表单

.form-control定制效果。

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

2 水平表单

1、在<form>元素是使用类名“form-horizontal”。

在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

设置表单控件padding和margin值。

改变“form-group”的表现形式，类似于网格系统的“row”。

.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}.form-horizontal .radio,.form-horizontal .checkbox {min-height: 27px;}.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}.form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal .control-label {text-align: right;  }}.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}

2、配合Bootstrap框架的网格系统。

3 内联表单

在<form>元素中添加类名“form-inline”

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;} 隐藏元素 form-control 控制表单按照样式输出

2.2表单控件

下拉选择框select

multiple

没有默认一行

有多行

文本域textarea

.form-control 表单控件宽度为100%或auto。

复选框checkbox和单选择按钮radio

借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式 .radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}.radio + .radio,.checkbox + .checkbox {margin-top: -5px;}

复选框和单选按钮水平排列

.radio-inline,.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}

按钮

在Bootstrap框架中的按钮都是采用<button>来实现。

表单控件大小

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

.input-sm {height: 30px;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}select.input-sm {height: 30px;line-height: 30px;}textarea.input-sm,select[multiple].input-sm {height: auto;}.input-lg {height: 46px;padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}select.input-lg {height: 46px;line-height: 46px;}textarea.input-lg,select[multiple].input-lg {height: auto;} 1.表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”

2.通过网格系统来控制表单控件宽度

表单控件状态:焦点状态

.form-control:focus {border-color: #66afe9;outline: 0;  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} 在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样

input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

表单控件状态(禁用状态)

.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}

input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline {cursor: not-allowed;} 被禁用：在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。 1. 2.
         
              
                   
       //被禁用             
       //被禁用         
      
     
     
 
    
 3.

表单控件状态(验证状态)

不带图标:has-success hsa-error has-warning


      
          
      成功状态

表单提示信息

.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}

.help-inline{  display:inline-block;  padding-left:5px;  color: #737373;} 1.提示信息在框下 在表单控制状态下div内再加一个span 2.提示信息在框同行右边

三、按钮

基本按钮

.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}

默认按钮

.btn-default { color: #333; background-color: #fff; border-color: #ccc; }

多标签支持(button/a最好)

a标签按钮span标签按钮
    
     div标签按钮

定制风格

按钮大小

.btn-lg,.btn-group-lg> .btn {padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}.btn-sm,.btn-group-sm> .btn {padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}.btn-xs,.btn-group-xs> .btn {padding: 1px 5px;font-size: 12px;line-height: 1.5;border-radius: 3px;}

块状按钮

按钮宽度充满整个父容器（width:100%）

.btn-block {display: block;width: 100%;padding-right: 0;padding-left: 0;}.btn-block + .btn-block {margin-top: 5px;}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block {width: 100%;}

按钮状态——活动状态

.btn:focus,.btn:active:focus,.btn.active:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}.btn:hover,.btn:focus {color: #333;text-decoration: none;}.btn:active,.btn.active {background-image: none;outline: 0;  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}

按钮状态——禁用状态

背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。

方法2：在元素标签中添加类名“disabled”

而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

.btn.disabled,.btn[disabled],fieldset[disabled] .btn {pointer-events: none;cursor: not-allowed;filter: alpha(opacity=65);  -webkit-box-shadow: none;box-shadow: none;opacity: .65;}

四、图像

1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片

设置图片大小：

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

img {vertical-align: middle;}.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {display: block;max-width: 100%;height: auto;}.img-rounded {border-radius: 6px;}.img-thumbnail {display: inline-block;max-width: 100%;height: auto;padding: 4px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;  -webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.img-circle {border-radius: 50%;}

图标

这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.glyphicon-asterisk:before {content: "\2a";}….

任何内联元素上应用所对应的样式即可

名称查看

Font Awesome：

http://www.bootcss.com/p/font-awesome

五、网格系统

实现原理

将容器平分成12份

工作原理

在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。

容器(.container)。针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px。

不能超过12行，如果超过就把超过的行放到下一行

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  @media (min-width: 768px) {  .container {    width: 750px;  }  @media (min-width: 992px) {  .container {    width: 970px;  }  @media (min-width: 1200px) {  .container {    width: 1170px;

.row {  margin-right: -15px;  margin-left: -15px;

基本用法

1、列组合

只涉及两个CSS两个特性：浮动与宽度百分比

2、列偏移

只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移

使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

3、列排序

改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。 col-md-push-* 向右移动*个距离 col-ma-pull-* 想做移动*个距离 4、列的嵌套

　　　　<div class="col-md-8">3

　　　　　　</div>

　　</div>

第5章菜单、按钮及导航

六、下拉菜单

（基本用法）

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

下拉菜单（原理分析）

.dropdown-menu {  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/  left: 0;  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/  display: none;/*默认隐藏下拉菜单项*/  float: left;  min-width: 160px;  padding: 5px 0;  margin: 2px 0 0;  font-size: 14px;  list-style: none;  background-color: #fff;  background-clip: padding-box;  border: 1px solid #ccc;  border: 1px solid rgba(0, 0, 0, .15);  border-radius: 4px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

下拉菜单（下拉分隔线）

添加一个空的，并且给这个
添加类名“divider”来实现添加下拉分隔线的功能 .dropdown-menu .divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}

下拉菜单（菜单标题）

.dropdown-header {  display: block;  padding: 3px 20px;  font-size: 12px;  line-height: 1.42857143;  color: #999;}

下拉菜单（对齐方式）

在ul中使用，同时一定要为.dropdown添加float:leftcss样式。 .dropdown-menu.pull-right {  right: 0;  left: auto;}.dropdown-menu-right {  right: 0;  left: auto;}

下拉菜单（菜单项状态）

默认不用设置的：悬浮状态（:hover）和焦点状态（:focus） .dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus {  color: #262626;  text-decoration: none;  background-color: #f5f5f5;} li添加类名可实现的：当前状态（.active）和禁用状态（.disabled）

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus {  color: #fff;  text-decoration: none;  background-color: #428bca;  outline: 0;}.dropdown-menu > .disabled > a,.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  color: #999;}.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  text-decoration: none;  cursor: not-allowed;  background-color: transparent;  background-image: none;  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}

七、按钮

（按钮组）

依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

.btn-group,.btn-group-vertical {  position: relative;  display: inline-block;  vertical-align: middle;}.btn-group > .btn,.btn-group-vertical > .btn {  position: relative;  float: left;}.btn-group > .btn:hover,.btn-group-vertical > .btn:hover,.btn-group > .btn:focus,.btn-group-vertical > .btn:focus,.btn-group > .btn:active,.btn-group-vertical > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn.active {  z-index: 2;}.btn-group > .btn:focus,.btn-group-vertical > .btn:focus {  outline: none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group {   margin-left: -1px;}

1、默认所有按钮都有圆角

2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果

3、第一个按钮只留左上角和左下角是圆角

4、最后一个按钮只留右上角和右下角是圆角

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {  border-radius: 0;}.btn-group > .btn:first-child {  margin-left: 0;}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}.btn-group > .btn-group {  float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {  border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}

按钮（按钮工具栏）

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持5px的左外距，注意清除浮动 只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组：.btn-group-lg:大按钮组.btn-group-sm:小按钮组 .btn-group-xs:超小按钮组

.btn-toolbar {  margin-left: -5px;}.btn-toolbar .btn-group,.btn-toolbar .input-group {  float: left;}.btn-toolbar > .btn,.btn-toolbar > .btn-group,.btn-toolbar > .input-group {  margin-left: 5px;}

按钮（嵌套分组）

按钮和下拉菜单的组合形成一个导航栏

按钮（垂直分组）

只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

和水平分组按钮不一样的是：

☑ 水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角

☑ 垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角

按钮（等分按钮）

整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。

将btn-group换成btn-group-justified

实现原理:把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）

尽量使用标签元素来制作按钮，因为使用

按钮下拉菜单

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

<li><a href="##">按钮下拉菜单项</a></li>

</ul>

</div>

与之前的下拉菜单唯一不同的是将dropdown换成了btn-group

按钮的向下向上三角形

有的时候我们的下拉菜单会向上弹起,这个时候我们的三角方向需要朝上显示

实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

向下的三角形（向上三角与向下三角的区别：其实就是改变了一个border-bottom的值） .caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;} 按钮中的三角形

.btn .caret {  margin-left: 0;}.btn-lg .caret {  border-width: 5px 5px 0;  border-bottom-width: 0;}.dropup .btn-lg .caret {  border-width: 0 5px 5px;} 向上弹起：

.dropup .caret,.navbar-fixed-bottom .dropdown .caret {  content: "";  border-top: 0;  border-bottom: 4px solid;}

向上弹起的下拉菜单

注意：如果是向上的三角形-->dropup则下拉菜单框会向上显示

实现方法为：主要将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%

八、导航

（基础样式）

.nav

.nav-tabs

导航（标签形tab导航）

当前选中项：active 当前不可选择项: disabled

导航（胶囊形(pills)导航）

只需要把类名“nav-tabs”换成“nav-pills”

导航（垂直堆叠的导航）

nav-stacked 组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“
”

自适应导航（使用）

“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用

效果:当宽度小于某个值时，垂直

当宽度大于时，水平自适应

有一个媒体查询条件：“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能水平显示。当你的浏览器视窗宽度小于768px的时候，将会垂直显示

自适应导航（实现原理）

实现原理：列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示

导航加下拉菜单（二级导航）

实现原理：只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以

但是不能实现三级导航

面包屑式导航

breadcrumb 面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置） 实现原理：使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）

导航条基础

在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

基础导航条

</ul>

</div>

解析：

navbar：设置左右padding和圆角等效果

navbar-default：导航条的颜色

navbar-nav:在导航.nav的基础上重新调整了菜单项的浮动与内外边距

为导航条添加标题、二级菜单及状态

　</div>

</ul>

</div>

解析：

.navbar-brand {float: left;height: 50px;padding: 15px 15px;font-size: 18px;line-height: 20px;}.navbar-brand:hover,.navbar-brand:focus {text-decoration: none;}@media (min-width: 768px) {.navbar> .container .navbar-brand,.navbar> .container-fluid .navbar-brand {margin-left: -15px;}}

带表单的导航条

</div>

</form>

</div>

navbar-left 表单向左浮动

navbar-right 表单向右浮动

导航条中的按钮、文本和链接

　</div>

<a href="##" class="navbar-text">Navbar Text</a>

</div>

换成li标签会出现对齐不当的问题

需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

1、导航条中的按钮navbar-btn

2、导航条中的文本navbar-text

固定导航条


    
     　…
    
 实现原理：在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0

解析：

navbar-fixed-top：导航条固定在浏览器窗口顶部

navbar-fixed-bottom：导航条固定在浏览器窗口底部

3、导航条中的普通链接navbar-link

存在bug：

页面主内容顶部和底部都被固定导航条给遮住了

解决：

body {  padding-top: 70px;/*有顶部固定导航条时设置*/  padding-bottom: 70px;/*有底部固定导航条时设置*/} 2.

.navbar-fixed-top ~ .content {   padding-top: 70px;}.navbar-fixed-bottom ~ .content {  padding-bottom: 70px;}

响应式导航条

源码

<span class="sr-only">Toggle Navigation</span>

</button>

</div>

</ul>

</div>

反色导航条

navbar-inverse：其变化只是导航条的背景色和文本做了修改

分页导航（带页码的分页导航）

源码

在ul加类（padding大小、font-size大小和圆角大小）

pagination-lg 让分页导航变大；

pagination-sm 让分页导航变小：

分页导航（翻页分页导航）

源码： 
       
     «上一页
   
     下一页»
    
 在li标签上加类名（一个进行了左浮动，一个进行了右浮动）

previous：让“上一步”按钮居左

next：让“下一步”按钮居右

disabled：分页按钮处于禁用状态，但同样不能禁止其点击功能

徽章

Inbox 42

使用:empty伪元素，当没有内容的时候隐藏：

.badge:empty {display: none;}

九、缩略图

源码

…       解析 通过“thumbnail”样式配合bootstrap的网格系统来实现 说明 可视区域  >768px 4个

可视区域  <768px 2个 源码

</a>

<h3>Bootstrap框架系列教程</h3>

<p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>

<p>

</p>

</div>

十、警示框

默认警示框

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

可关闭的警示

恭喜您操作成功！

</div>

警示框的链接

You successfully read

<a href="#" class="alert-link">this important alert message</a>

</div>

解析

alert ：设置了警示框的背景色、边框、圆角和文字颜色

十一、进度条

源码

基本进度条

</div>

彩色进度条

</div>

条纹进度

</div>

动态条纹进度条

</div>

层叠进度条

</div>

带Label的进度

</div>

基本进度表实现原理

progress：设置进度条容器的背景色，容器高度、间距等

progress-bar：设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：

动态条纹进度表实现原理

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

十二、媒体对象

默认媒体对象

//图片

</a>

//描述

<h4 class="media-heading">系列：十天精通CSS3</h4>

<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

</div>

媒体对象的嵌套

media-body的div中嵌套一个新的media

媒体对象列表

li.media

</ul>

解析

媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

十三、列表组

基础列表组

<li class="list-group-item">揭开CSS3的面纱</li>

</ul>

带徽章的列表组

<span class="badge">13</span>揭开CSS3的面

</li>

</ul>

带链接的列表组

1.只有文本的地方能够点击，如果要实现都能点击，则 li.a.display:block

<a href="##">揭开CSS3的面</a>

</li>

</ul>

2.区域都能点击，但是要对a标签进行处理去文本下划线，增加悬浮效果等


        
     图解CSS3    
     220Sass教程    
     玩转Bootstrap

自定义列表组

<h4 class="list-group-item-heading">图解CSS3</h4>

<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>

</a>

</div>

组合列表项的状态

li.active

多彩列表组

li.list-group-item-success

解析

list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

list-group-item：列表项，常用的是li元素，当然也可以是div元

带徽章的列表项

实现原理：

实现效果：给徽章设置了一个右浮动，当然如果有两个徽章同时在一个列表项中出现时，还设置了他们之间的距离

十四、面板

基础面版

<div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>

</div>

带有头和尾的面板

<div class="panel-heading">图解CSS3</div>

<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

</div>

</div>

彩色面版

面板中嵌套表格

div.panel-body.<table class="table table-bordered">

优化代码：

在实际应用运中，你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面：

十五、导入JavaScript插件（）。

因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。


    
     单独导入

☑ 动画过渡（Transitions）:对应的插件文件“transition.js”

☑ 模态弹窗（Modal）:对应的插件文件“modal.js”

☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

☑ 选项卡（Tab）：对应的插件文件“tab.js”

☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”

☑ 弹出框（Popover）：对应的插件文件“popover.js”

☑ 警告框（Alert）：对应的插件文件“alert.js”

☑ 按钮（Buttons）：对应的插件文件“button.js”

☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

☑ 图片轮播Carousel：对应的插件文件“carousel.js”

☑ 自动定位浮标Affix：对应的插件文件“affix.js”

动画过渡（Transitions）

☑ 模态弹出窗（Modal）的滑动和渐变效果；

☑ 选项卡（Tab）的渐变效果；

☑ 警告框（Alert）的渐变效果；

☑ 图片轮播（Carousel）的滑动效果。

模态弹出框（Modals）

//头部

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模态弹出窗标题</h4>

</div>

//主体

<p>模态弹出窗主体内容</p>

</div>

//尾部

</div>

模态弹出框--触发模态弹出窗2种方法

不过建议还是使用统一使用data-target的方式来触发。

声明式触发方法：


    
    
        
             
              
               
      
    
     
    
 模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）

1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性


    点击我会弹出模态弹出窗

模态弹出框--为弹出框增加过度动画效果

最外div.fade 参数说明

模态弹出框--模态弹出窗的使用（JavaScript触发）

参数设置：

参数	使用方法	描述
toggle	$(“#mymodal”).modal(“toggle”)	触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示
show	$(“#mymodal”).modal(“show”)	触发时，显示模态弹出窗
hide	$(“#mymodal”).modal(“hide”)	触发时，关闭模态弹出窗

事件设置：

事件类型	描述
show.bs.modal	在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal	该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal	在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal	该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发