Bootstrap(上)

矫情吗；* 2022-09-28 13:26 161阅读 0赞

## 一、概念 ##

Bootstrap是tiweenter小组的一部分员工为了提高操作css的工作效率，而开发的css框架。开源之后，一举成名，收到很多程序员的亲赖。  
bootstrap提供了一些css的样式集和js插件，它的js插件是依赖于jquery的，所以要在bootstrap之前引入jQuery.

## 二、兼容性 ##

Bootstrap2.0比较激进，兼容性不友好。Bootstrap3.0则是放弃了对IE7和firfox3.0的支持，在IE8中，bootstrap3.0虽然支持，但是也不是完美支持，呈现出的效果不是很好。

## 三、起步标准架构 ##

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Bootstrap 101 Template</title>
    
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        
        
        
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

## 四、bootstrap的初始化样式 ##

Bootstrap的全局样式采用了“normalize.css”。Bootstrap框架在初始化样式上做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
    移除body的margin声明;
    设置body的背景色为白色;
    为排版设置了基本的字体、字号和行高;
    设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式.
    
    让初始化其更适合Bootstrap的设计思想。

## 五、css组件 ##

### 1、hn标签 ###

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，

![这里写图片描述][SouthEast]

如果在以上标题之后又副标题，那么它提供了small标签，它们又独特的样式：
    1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
    2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
    详细代码请参阅bootstrap.css文件中第407行~第443行。

<h1>Bootstrap标题一<small>我是副标题</small></h1>
    <h2>Bootstrap标题二<small>我是副标题</small></h2>
    <h3>Bootstrap标题三<small>我是副标题</small></h3>
    <h4>Bootstrap标题四<small>我是副标题</small></h4>
    <h5>Bootstrap标题五<small>我是副标题</small></h5>
    <h6>Bootstrap标题六<small>我是副标题</small></h6>

### 2、p标签 ###

在Bootstrap中为文本设置了一个全局的文本样式。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

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

另外，Bootstrap还特意设置了p元素的margin值

/*源码请查看bootstrap.css文件中第467行~469行*/
    p { margin: 0 0 10px; }

想让一个段落p突出显示，可以通过添加类名“.lead”实现

/*源码查看bootstrap.css文件第470行~480行*/
    .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; }
    @media (min-width: 768px) {
       /*大中型浏览器字体稍大*/
    .lead { font-size: 21px; }
    }

### 3、small\\strong\\em\\cite\\b\\strong\\em\\i标签 ###

除此之外，Bootstrap还通过元素标签:、**、*和给文本做突出样式处理。***

b,strong { font-weight: bold; /*文本加粗*/ }
    small,.small { font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/ }
    cite { font-style: normal; }

在Bootstrap中，可以使用**和标签让文本直接加粗。**

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

### 4、强调类样式 ###

.text-muted：提示，使用浅灰色（\#999）  
.text-primary：主要，使用蓝色（\#428bca）  
.text-success：成功，使用浅绿色(\#3c763d)  
.text-info：通知信息，使用浅蓝色（\#31708f）  
.text-warning：警告，使用黄色（\#8a6d3b）  
.text-danger：危险，使用褐色（\#a94442）  
可以在要使用的元素，直接class=’text-muted’

### 5、文本对齐样式 ###

.text-left：左对齐  
.text-center：居中对齐  
.text-right：右对齐  
.text-justify：两端对齐

### 6、提供六种列表 \#\#\#, ###

/*源码*/
    ul,
    ol { margin-top: 0; margin-bottom: 10px; }
    ul ul,
    ol ul,
    ul ol,
    ol ol { margin-bottom: 0; }

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格

/*源码*/
    .list-unstyled { padding-left: 0; list-style: none; }

通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

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

dl\\dt\\dd设置

/*源码*/
    @media (min-width: 768px) {
    .dl-horizontal dt { float: left; width: 160px; overflow: hidden; text-overflow: ellipsis; /*上2，标题宽度超过160px时，将会显示三个省略号*/ clear: left; text-align: right; white-space: nowrap; }
    .dl-horizontal dd { margin-left: 180px; }
    }

其实现主要方式：  
将dt设置了一个左浮动，并且设置了一个宽度为160px  
将dd设置一个margin-left的值为180px，达到水平的效果  
当标题宽度超过160px时，将会显示三个省略号

### 7、代码风格 ###

使用``来显示单行内联代码 针对于单个单词或单个句子的代码  
使用

来显示多行块代码 针对于多行代码（也就是成块的代码）  
使用 来显示用户输入代码 表示用户要通过键盘输入的内容  
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

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

### 8、表格样式 ###

（1）table标签的样式  
1）  
源码查看bootstrap.css文件第1402行～第1441行  
.table：基础表格  
2）  
其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果  
.table-striped：斑马线表格

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

3）bootstrap.css文件第1450行~第1464行  
.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;/*表头底部边框*/ }

4）查看bootstrap.css文件中第1469行~第1472行  
.table-hover：鼠标悬停高亮的表格

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

.table-condensed：紧凑型表格  
.table-responsive：响应式表格  
都是响应式布局  
（2）tr标签的样式  
![这里写图片描述][SouthEast 1]  
注意要实现悬浮状态，需要在

标签上加入table-hover类

### 9、表单样式 ###

1）.form-horizontal  
水平表单风格（标签名居左，表单控件居右）  
![这里写图片描述][SouthEast 2]

/*bootstrap.css文件第1963行~第1991行*/
    .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）内联表单  
![这里写图片描述][SouthEast 3]  
上述效果，在元素中添加类名“form-inline”即可。  
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中

<div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
    </div>
    <div class="form-group">
        <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>

3）在label标签运用了一个类名“sr-only”，就可以将label标签隐藏。  
4）在Bootstrap中使用input时也必须添加type类型，因为Bootstrap框架都是通过input\[type=“?”\]的形式来定义样式的。为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

5）多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。  
6）textarea  
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。  
7)复选框checkbox和单选择按钮radio  
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”;  
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”.  
8)按钮  
在Bootstrap框架中的按钮都是采用button来实现。  
![这里写图片描述][SouthEast 4]  
9)表单控件大小  
.input-sm:让控件比正常大小更小  
.input-lg:让控件比正常大小更大  
如果我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”。换句话说，如果没有这样做，要通过网格系统来控制表单控件宽度，就需要这样使用：

9）表单控件状态(焦点状态)  
焦点状态是通过伪类“:focus”来实现

/*源码*/
    .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); }

从源码中我们可以看出，要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”：

![这里写图片描述][SouthEast 5]  
在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样。原因如下：

/*源码查看boostrap.css文件第1676行～第1682行*/
    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; }

10）表单控件状态(禁用状态)  
只需要在需要禁用的表单控件上加上“disabled”  
![这里写图片描述][SouthEast 6]  
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态  
对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

11）表单控件状态(验证状态)  
.has-warning:警告状态（黄色）  
.has-error：错误状态（红色）  
.has-success：成功状态（绿色）  
使用的时候只需要在form-group容器上对应添加状态类名。

在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。  
![这里写图片描述][SouthEast 7]  
从效果图中可以看出，图标都居右。在 Bootstrap 的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个 span 元素(跟在input标签后面即可)：

12）表单提示信息  
使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。

<form role="form">
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess1">成功状态</label>
      <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      <span class="help-block">你输入的信息是正确的</span>
      <span class="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>
      …
    </form>

![这里写图片描述][SouthEast 8]  
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：

.help-inline{ display:inline-block; padding-left:5px; color: #737373; }

使用时，就为span标签加class为help-inline  
![这里写图片描述][SouthEast 9]

[SouthEast]: /images/20220708/6774053c68ab44dd8c3ee7426a523798.png
[SouthEast 1]: /images/20220708/cf8ae870c3164e8fb653eb0385df7bfe.png
[SouthEast 2]: /images/20220708/33da537e7c944ac6a305b40102a678bd.png
[SouthEast 3]: /images/20220708/b77aeb27ff7c44f3be90446f6fd9f809.png
[SouthEast 4]: /images/20220708/76c42d0726c4491295a29ccf678edb15.png
[SouthEast 5]: /images/20220708/f0cdcc97d03842c0a7b2af209f433b32.png
[SouthEast 6]: /images/20220708/2d2690b374164386bdedc826bf50ab8f.png
[SouthEast 7]: /images/20220708/4547cf865a924e1aa6116ae0145df070.png
[SouthEast 8]: /images/20220708/8b3a7dd58d2a4d3bbb6b2dd18aacaa24.png
[SouthEast 9]: /images/20220708/58a35d53ff0a4555b1668aea504986ef.png