bootstrap的全局CSS样式以及组件的使用

骑猪看日落 2023-05-29 02:40 12阅读 0赞

#### 一、 如何使用bootstrap ####

> 1.  引入bootstrap.css文件
> 2.  引入normalize.css文件
> 3.  将bootstrap字体文件放到工程下（当用其中的图标时会去寻找该文件夹中的内容）

#### 一、布局容器 ####

> Bootstrap需要为页面内容和栅格系统包裹一个`.container`容器。有两个类：`container`和`container-fluid`。

##### 1. `container`类：固定布局 #####

> 固定布局用于固定宽度并支持响应式布局的容器。该类中在不同的屏幕大小有不同的宽度。

##### 2. `container-fluid`:流式布局 #####

> 流式布局用于100%宽度，占据全部视口的容器。默认有15px的左右`padding`

#### 二、 栅格系统 ####

> 1.  ==Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动平分为12列。==它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
> 2.  `row`必须包含在`.container/.container-fluid`中。列必须包含在`row`中。内容放在列中。
> 3.  通过为列设置`padding`来设置列与列之间的间隔大小。
> 4.  可以通过给`.row`设置负`margin`从而抵消`.container`的`padding`值。给子元素设置负`margin`可抵消父元素的`padding`
> 5.  每一个列都有左右`15px`的`padding`值。
> 6.  当每一个`row`所包含的列大于12个时，会将包含多余列的元素作为一个整体从另一行重新开始排布。

###### 1. 栅格参数 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

##### 2. 列偏移 #####

1.  `col-md-offset-*`:可通过类似形式设置在不同屏幕大小上将该列整体向右移动多少列的距离（设置整个行的`margin-left`值，即向右移动是所有列向右移动）。
2.  `col-md-push-*` :可通过类似形式设置在不同屏幕大小上将该列向右移动多少列的距离（只是将该列相对于原位置向右移动，其余列不变）。
3.  `col-md-pull-*`：可通过类似形式设置在不同屏幕大小上将改列向左移动多少列的距离（只是将该列相对于原位置向左移动，其余列不变）。

##### 3. 嵌套列 #####

> 可在一个列中嵌套一个新的 .row 元素和一系列 .col-sm-\* 元素。

#### 二、 排版 ####

##### 1. 基础排版 #####

<table> 
 <thead> 
  <tr> 
   <th>类/标签</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.h1</code> ~ <code>.h6</code></td> 
   <td>作用与<code>&lt;h1&gt;</code>~<code>&lt;h6&gt;</code>标签相同</td> 
  </tr> 
  <tr> 
   <td><code>.small</code></td> 
   <td>作用与 <code>&lt;small&gt;&lt;small&gt;</code>标签相同</td> 
  </tr> 
  <tr> 
   <td><code>.lead</code></td> 
   <td>让字体变大，让其突出显示</td> 
  </tr> 
  <tr> 
   <td><code>.mark</code></td> 
   <td>让内容高亮</td> 
  </tr> 
  <tr> 
   <td><code>&lt;s&gt;&lt;/s&gt;</code>与<code>&lt;del&gt;&lt;/del&gt;</code></td> 
   <td>作用相同，都是给文本添加删除线</td> 
  </tr> 
  <tr> 
   <td><code>&lt;u&gt;&lt;/u&gt;</code>与<code>&lt;ins&gt;&lt;/ins&gt;</code></td> 
   <td>给文本添加下划线的作用</td> 
  </tr> 
  <tr> 
   <td><code>&lt;strong&gt;&lt;/strong&gt;</code></td> 
   <td>加粗文本</td> 
  </tr> 
  <tr> 
   <td><code>&lt;em&gt;&lt;/em&gt;</code></td> 
   <td>文本倾斜</td> 
  </tr> 
  <tr> 
   <td><code>.text-left</code>、<code>.text-right</code>、<code>.text-center</code></td> 
   <td>文本对齐方式（左、右、中）</td> 
  </tr> 
  <tr> 
   <td><code>.text-justify</code></td> 
   <td>暂时和左对齐效果相同</td> 
  </tr> 
  <tr> 
   <td><code>.text-nowrap</code></td> 
   <td>文本不折行显示</td> 
  </tr> 
  <tr> 
   <td><code>.text-lowercase</code></td> 
   <td>文本全部字母小写</td> 
  </tr> 
  <tr> 
   <td><code>.text-uppercase</code></td> 
   <td>文本全部字母大写</td> 
  </tr> 
  <tr> 
   <td><code>.text-capitalize</code></td> 
   <td>文本所有单词首字母大写</td> 
  </tr> 
  <tr> 
   <td><code>&lt;abbr title="完整内容"&gt;&lt;/abbr&gt;</code></td> 
   <td>当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的  元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性</td> 
  </tr> 
  <tr> 
   <td><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></td> 
   <td>引用样式。可通过添加<code>.blockquote-reverse</code>类让引用内容向右对齐。</td> 
  </tr> 
  <tr> 
   <td><code>&lt;footer&gt;&lt;/footer&gt;</code></td> 
   <td>用于标明引用来源</td> 
  </tr> 
  <tr> 
   <td>bootstrap将全局的<code>font-size</code>设置为<code>14px</code>，<code>line-height</code>设置为1.428。<code>&lt;p&gt;</code>标签被设置了<code>10px</code>的底部外边距<code>margin</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>.control-label</code></td> 
   <td>设置label的文字右对齐</td> 
  </tr> 
  <tr> 
   <td><code>.center-block</code></td> 
   <td>让块级元素居中</td> 
  </tr> 
  <tr> 
   <td><code>.clearfix</code></td> 
   <td>清除浮动</td> 
  </tr> 
  <tr> 
   <td><code>.push-left</code></td> 
   <td>左浮动</td> 
  </tr> 
  <tr> 
   <td><code>.push-right</code></td> 
   <td>有浮动</td> 
  </tr> 
  <tr> 
   <td><code>.show</code></td> 
   <td>显示</td> 
  </tr> 
  <tr> 
   <td><code>.hide</code></td> 
   <td>隐藏</td> 
  </tr> 
  <tr> 
   <td><code>.close</code></td> 
   <td>关闭按钮</td> 
  </tr> 
 </tbody> 
</table>

###### 2. 列表 ######

<table> 
 <thead> 
  <tr> 
   <th>类/标签</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.list-unstyled</code></td> 
   <td>无样式列表可用。移除了默认的<code>list-style</code>样式和左侧外边距。</td> 
  </tr> 
  <tr> 
   <td><code>.list-inline</code></td> 
   <td>将<code>&lt;ul&gt;</code>所有子元素设置为行内块元素，让其放置一行</td> 
  </tr> 
  <tr> 
   <td><code>.dl-horizontal</code></td> 
   <td>可让<code>&lt;dl&gt;</code>内的子元素排在一行</td> 
  </tr> 
 </tbody> 
</table>

###### 3. 表格 ######

###### ① 基本样式类 ######

<table> 
 <thead> 
  <tr> 
   <th>类/标签</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.table</code></td> 
   <td>为table标签添加该类可给其添加少量的<code>padding</code>和 水平方向的分割线</td> 
  </tr> 
  <tr> 
   <td><code>.table-striped</code></td> 
   <td>为table标签添加该类可以给每一行增加斑马条纹样式</td> 
  </tr> 
  <tr> 
   <td><code>table-bordered</code></td> 
   <td>为table标签添加该类可给每个单元格增加边框</td> 
  </tr> 
  <tr> 
   <td><code>table-hover</code></td> 
   <td>为table标签添加该类可对每一行设置鼠标悬停样式</td> 
  </tr> 
  <tr> 
   <td><code>table-condensed</code></td> 
   <td>让表格更加紧凑，单元格中的内补（padding）均会减半。</td> 
  </tr> 
 </tbody> 
</table>

###### ② 表格中的状态类：可设置行或单元格的背景颜色 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]

###### ③ 响应式表格 ######

> 将任何`.table`元素包裹在`tabble-responsive`元素内，即可创建响应式表格。其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

##### ④ 表单 #####

> 1.  Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可(添加到表单控件本身不起作用)。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
> 2.  若要给表单控件尾部添加校验状态图标，则需要给其父元素添加`has-feedback`类，以及图标元素设置`glyphicon glyphicon-状态 .form-control-feedback`三个类。其中`glyphicon-状态`中的状态可根据所需选择。

//添加图标例子
     <form class="form-horizontal">
            <div class="form-group has-success">
                <label class="col-sm-1 control-label">姓名</label>
                <div class="col-sm-9 has-feedback">
                    <input type="text" class="form-control"/>
                    <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>//图标元素
                </div>
            </div><div class="form-group has-warning ">
            <label class="col-sm-1 control-label">姓名</label>
            <div class="col-sm-9 has-feedback">
                <input type="text" class="form-control"/>
                <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
            </div>
        </div>
            <div class="form-group has-error">
            <label class="col-sm-1 control-label">姓名</label>
            <div class="col-sm-9 has-feedback">
                <input type="text" class="form-control"/>
                <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
            </div>
        </div>
            <div class="form-group">
            <label class="col-sm-1 control-label">姓名</label>
            <div class="col-sm-9 has-feedback">
                <input type="text" class="form-control"/>
                <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
            </div>
        </div>
        </form>

<table> 
 <thead> 
  <tr> 
   <th>类/标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.form-control</code></td> 
   <td>所有设置了<code>form-control</code>类的<code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>和<code>&lt;select&gt;</code>的元素的宽都被设置为<code>100%</code></td> 
  </tr> 
  <tr> 
   <td><code>.form-group</code></td> 
   <td>将<code>label</code>元素和设置了<code>form-control</code>的控件包裹在设置了<code>.form-group</code>的元素中可得到更好的排版（每一个设置了<code>.form-group</code>类的元素之间都会有一定的间距）</td> 
  </tr> 
  <tr> 
   <td><code>.form-inline</code></td> 
   <td>为form标签设置该类可让其内容左对齐且每一个元素都为行内块元素，即可在一行放置form标签内部的元素。该类只有在视口宽度大于等于768px时有效，小于768px会使表单折叠</td> 
  </tr> 
  <tr> 
   <td><code>.form-horizontal</code></td> 
   <td>给form标签设置该类可以让每一组<code>.form-group</code>内的子元素并排。且此时设置了<code>.form-group</code>的元素可被当做栅格系统的<code>.row</code>。故可给其子元素设置所占列比例</td> 
  </tr> 
  <tr> 
   <td><code>rows</code></td> 
   <td>可以给<code>textarea</code>标签设置<code>rows</code>属性</td> 
  </tr> 
  <tr> 
   <td><code>.checkbox-inline</code></td> 
   <td>将设置了该类的复选框设置为行内块标签</td> 
  </tr> 
  <tr> 
   <td><code>.radio-inline</code></td> 
   <td>将设置了该类的单选框设置为行内块标签</td> 
  </tr> 
  <tr> 
   <td><code>.form-control-static</code></td> 
   <td>若想让form标签中的<code>&lt;p&gt;</code>标签和<code>label</code>元素放置一行，可给<code>&lt;p&gt;</code>标签使用<code>.form-control-static</code></td> 
  </tr> 
  <tr> 
   <td><code>.input-lg</code>/<code>.input-sm</code>/</td> 
   <td>设置表单控件的高</td> 
  </tr> 
  <tr> 
   <td><code>.col-lg-*</code></td> 
   <td>通过<code>.col-lg-*</code>类似的类可以为控件设置宽（无须设置<code>.row</code>）</td> 
  </tr> 
  <tr> 
   <td><code>.form-group-lg</code>/<code>.form-group-sm</code></td> 
   <td>为<code>.form-horizontal</code>包裹的<code>label</code>元素和表单控件设置高度</td> 
  </tr> 
 </tbody> 
</table>

//.form-horizontal例子
    <form class="form-horizontal">
      <div class="form-group">
      //可给.form-group的子元素设置所占列比例
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>

##### ⑤ 按钮 #####

> 1.  为 `<a>、<button> 或 <input>` 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
> 2.  如果`<a>` 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 `role="button"`属性。

<table> 
 <thead> 
  <tr> 
   <th>类</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.btn</code></td> 
   <td>给按钮添加基本样式（去除outline等等）</td> 
  </tr> 
  <tr> 
   <td><code>.btn-default</code>/<code>.btn-danger</code>/<code>.btn-warning</code>/<code>.btn-success</code>/<code>.btn-info</code>/<code>.btn-primary</code></td> 
   <td>设置按钮的背景颜色</td> 
  </tr> 
  <tr> 
   <td><code>.btn-lg</code>/<code>.btn-sm</code>/<code>.btn-xs</code></td> 
   <td>设置按钮的尺寸</td> 
  </tr> 
  <tr> 
   <td><code>.btn-link</code></td> 
   <td>设置按钮点击与链接点击样式类似</td> 
  </tr> 
  <tr> 
   <td><code>.btn-block</code></td> 
   <td>给按钮添加该类可将其拉至父元素100%的宽度，按钮变为块级元素</td> 
  </tr> 
 </tbody> 
</table>

##### ⑥ 图片 #####

> 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了`max-width: 100%;、 height: auto; 和 display: block;`属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

<table> 
 <thead> 
  <tr> 
   <th>类</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.img-circle</code></td> 
   <td>图片的形状设置为圆形</td> 
  </tr> 
  <tr> 
   <td><code>.img-rounded</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>.img-thumbnail</code></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]

###### ⑦ 文字颜色类 ######

<table> 
 <thead> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>text-danger</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>text-warning</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>text-info</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>text-success</code></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

###### ⑧ 背景色辅助类 ######

<table> 
 <thead> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.bg-info</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>.bg-success</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>.bg-warning</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>.bg-danger</code></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 二、 组件的使用 ####

##### 如何使用组件 #####

> 1.  引入`bootstrap.js`文件
> 2.  引入`bootstrap.css`文件
> 3.  引入`jquery....js`文件
> 4.  官网代码copy进工程修改显示内容即可

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191101165940904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/201911011752371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191101190801544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70