Bootstrap(中)

傷城~ 2022-09-28 14:27 20阅读 0赞

## 一、按钮样式 ##

Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。  
Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

### 1、.btn bootstrap基础样式 ###

.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; /*css3 属性user-select:none|text;none文本不能被选择,text：可以选择文本;all,element*/ -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; }

例子：

<button class="btn" type="button">我是一个基本按钮</button>

### 2、btn-default ###

默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

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

还可以使用和标签等定义按钮。但是为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。

### 3、其他样式风格 ###

在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。  
![这里写图片描述][SouthEast]

### 4、按钮大小 ###

![这里写图片描述][SouthEast 1]  
使用之前，要使用.btn样式

### 5、.btn-block ###

按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。原理:width:100%

### 6、活动状态 ###

在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。  
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）

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

而且不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整。  
/*源码请查看bootstrap.css文件第2045行～第2058行*/

### 7、按钮状态——禁用状态 ###

在Bootstrap框架中，要禁用按钮有两种实现方式：  
方法1：在标签中添加disabled属性  
方法2：在元素标签中添加类名“disabled”  
两者的主要区别是：  
“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。  
而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。  
/*对应的样式代码请查阅bootstrap.css文件第2030行～第2039行*/

### 8、图像 ###

img-responsive：响应式图片，主要针对于响应式设计  
img-rounded：圆角图片  
img-circle：圆形图片  
img-thumbnail：缩略图片  
查阅bootstrap.css文件第306行～第335行  
由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

## 二、字体图标 ##

![这里写图片描述][SouthEast 2]  
使用时，引入bootstrap,相应元素class加图中样式。字体图标原理就是：使用CSS3的@font-face属性配合字体来实现的icon效果

/*使用*/
    <span class="glyphicon glyphicon-search"></span>
        <span class="glyphicon glyphicon-asterisk"></span>
        <span class="glyphicon glyphicon-plus"></span>
        <span class="glyphicon glyphicon-cloud"></span>

## 三、网格系统 ##

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。  
Bootstrap框架的网格系统工作原理如下：  
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

3、具体内容应当放置在列容器（col-md-4等等）之内，而且只有列（col-md-4等等）才可以作为行容器(.row)的直接子元素  
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响  
见图  
![这里写图片描述][SouthEast 3]  
图解释：  
(1)最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。  
(2)第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px。在bootstrap.css的第736行～第756行进行设置：

.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;
      }

(3)２号横条阐述的是，将容器的行（.row）平分了12等份，也就是列。每个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px，从而致使页面不美观，当然，如果你需要留有一定的间距，这个做法是不错的。如bootstrap.css中第767行~第772行所示：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      }

(4)３号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”，用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第763行~第767行可以看到：

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

(5)将行与列给合在一起就能看到横条4的效果。  
也就是我们期望看到的效果，第一列和最后一列与容（.container）之间没有间距。也就是

(6)bootstrap源码列浮动

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
     }

(7)bootstrap源码:定义每个列组合的宽度（使用的百分比）

.col-md-12 { width: 100%; }
      .col-md-11 { width: 91.66666667%; }
      .col-md-10 { width: 83.33333333%; }
      .col-md-9 { width: 75%; }
      .col-md-8 { width: 66.66666667%; }
      .col-md-7 { width: 58.33333333%; }
      .col-md-6 { width: 50%; }
      .col-md-5 { width: 41.66666667%; }
      .col-md-4 { width: 33.33333333%; }
      .col-md-3 { width: 25%; }
      .col-md-2 { width: 16.66666667%; }
      .col-md-1 { width: 8.33333333%; }

(8)列偏移  
.col-md-offset-n (n为0-9)  
使用”col-md-offset-\*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，

<div class="row">
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
      <div class="col-md-4">col-md-4</div>
    </div>

上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。  
（9）列排序  
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)

[SouthEast]: /images/20220708/886c92c0caf143549330f3acd1c8af80.png
[SouthEast 1]: /images/20220708/9dbe464f40774a059d7e1ab7917513f4.png
[SouthEast 2]: /images/20220708/73cc43d495894715933276418c5f29e9.png
[SouthEast 3]: /images/20220708/9290ff7b03cc4b57b8199b2c99bb12d8.png