【Bootstrap框架】——全局CSS样式（Global CSS Style）

骑猪看日落 2022-06-08 09:58 404阅读 0赞

1.CSSReset（样式重置）  
2.按钮  
3.图片  
4.文本  
5.排版&代码&列表  
6.表格  
7.栅格布局系统  
8.响应式表单

<table> 
 <tbody> 
  <tr> 
   <td><b>1.CSSReset（样式重置）</b></td> 
  </tr> 
 </tbody> 
</table>

## box-sizing ##

允许以特定的方式定义匹配某个区域的特定元素，有三个参数：

*  content-box：默认值，盒子总宽度=margn+border+padding+width
 *  border-box：推荐值，盒子总宽度=margn+width（border和padding算在width之内）
 *  inherit：规定应从父元素继承 box-sizing 属性的值

详细参考：[http://www.w3school.com.cn/cssref/pr\_box-sizing.asp][http_www.w3school.com.cn_cssref_pr_box-sizing.asp]

--------------------

常见样式重置：

*{ box-sizing: border-box; }
    html{ font-size: 10px; }
    body{ margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-size: 14px; background-color: #fff; }
    p{ margin-bottom: 10px; }
    a{ color: #337ab7; text-decoration: none; }
    a:hover{ color: #23527c; text-decoration: underline; }
    h1{ font-size: 36px; margin-top: 20px; margin-bottom: 10px; }
    h2{ font-size: 30px; margin-top: 20px; margin-bottom: 10px; }
    h3{ font-size: 24px; margin-top: 20px; margin-bottom: 10px; }
    h4{ font-size: 18px; margin-top: 10px; margin-bottom: 10px; }
    h5{ font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
    h6{ font-size: 12px; margin-top: 10px; margin-bottom: 10px; }
    img{ border: 0; vertical-align: middle; }

## 三种形式的按钮： ##

*  Btn按钮：`<button>Btn按钮</button>`
 *  Link按钮：`<input type="button" value="Input按钮" />`
 *  Input按钮：`<a href="#">Link按钮</a>`
 *  \-

--------------------

> 按钮的默认样式图：

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

> class=”btn btn-default”

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

--------------------

## 常用的5种颜色 ##

> 红色：class=”btn btn-danger”  
> 绿色：class=”btn btn-success”  
> 黄色：class=”btn btn-warning”  
> 蓝色：class=”btn btn-info”  
> 浅蓝色：class=”btn btn-primary”

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

--------------------

## 4个常用的大小 ##

> Large：btn-lg 一般用于超大PC显示器  
> Medium：默认（md） 一般用于普通的PC显示器  
> Small：btn-sm 一般用于平板显示器  
> ExtraSmall：btn-xs 一般用于手机显示器

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

--------------------

## 块级按钮 ##

> class=”btn btn-block”

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

> class=”img-rounded”

圆角图片：border-radius: 6px;

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

> class=”img-sircle”

圆形图片：border-radius: 50%;

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

> class=”img-thumbnail”

缩略图片：border、padding、max-width

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

> class=”img-responsive”

响应式图片，每个在一行：display:block、max-width:100%

## 5种常见的基本颜色 ##

> 红色：class=”text-danger”  
> 绿色：class=”text-success”  
> 黄色：class=”text-warning”  
> 蓝色：class=”text-info”  
> 浅蓝色：class=”text-primary”

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

--------------------

## 5种常见的背景颜色 ##

> 红色：class=”bg-danger”  
> 绿色：class=”bg-success”  
> 黄色：class=”bg-warning”  
> 蓝色：class=”bg-info”  
> 浅蓝色：class=”bg-primary”

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

上面两种可以混搭，效果如图：  
![这里写图片描述][SouthEast 10]

--------------------

## 文本的对齐方式 ##

text-align：left/right/center

> 左对齐：class=”text-left”  
> 居中对齐：class=”text-center”  
> 右对齐：class=”text-right”  
> 两端对齐：class=”text-justify”

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

--------------------

## 文本变形 ##

> 大写文本：class=”text-uppercase”  
> 小写文本：class=”text-lowercase”  
> 大写字母开头文本：class=”text-capitalize”

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

--------------------

## 行内块（img、p）的对齐 ##

float：left/right、!important

> 左对齐：class=”pull-left”  
> 右对齐：class=”pull-right”  
> 清除浮动：class=”clearfix”

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

<blockquote class="blockquote-reverse">
        <p>三人行必有我师</p>
        <footer>摘自《论语》</footer>
    </blockquote>

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

> 更多特性参考网站

[http://v3.bootcss.com/css/\#type][http_v3.bootcss.com_css_type]

## Bootstrap表格样式 ##

> class=”table”

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

--------------------

## 四周带边框的表格样式 ##

> class=”table table-bordered”

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

--------------------

## 隔行变色、悬停效果的表格 ##

> class=”table table-striped”  
> class=”table table-hover”

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

--------------------

## 响应式表格 ##

> class=”table table-responsive”

此class必须用在table的父元素div上。变小后有边框，有滚动条。

<table> 
 <tbody> 
  <tr> 
   <td><b>7.栅格布局系统</b></td> 
  </tr> 
 </tbody> 
</table>

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

*  系统提出了行（row）和列（col）的概念，一行默认均分为12列
 *  行中只能放置列，不能放置内容，内容只能放置在列中
 *  列中可以继续嵌套行
 *  行必须放在容器中。Bootstrap默认提供了两种容器：.container（固定宽度的容器）和.container-fluid（流式容器）
 *  把浏览器的屏幕分为4种：`超大PC屏幕（lg>1200px）`、`普通PC屏幕（992px<md<1200px）`、`平板电脑屏幕（768px<sm<992px）`、`手机屏幕（xs<768px）`
 *  行必须声明class为.row；列必须声明class为.col-xs/sm/md/lg-\* （\*是一个数字，范围在1-12之间，指定某个列的占宽）
 *  .col-xs-\*对xs/sm/md/lg屏幕都有效
 *  .col-sm-\*对sm/md/lg屏幕都有效
 *  .col-md-\*md/lg屏幕都有效
 *  .col-lg-\*对lg屏幕都有效
 *  可以为同一个div指定在不同屏幕下的多个宽度值。`class="col-md-6 col-sm-8 col-xs-12"`
 *  在某种屏幕下隐藏的列：`.hidden-xs：只在手机屏幕下隐藏`、`.hidden-sm：只在平板屏幕下隐藏`、`.hidden-md：只在PC屏幕下隐藏`、`.hidden-lg：只在超大PC屏幕下隐藏`
 *  列的偏移：`class="col-xs-offset-2`

Bootstrap默认提供两个容器类有如下样式：  
1、.container 固定宽度的容器：

*  lg：容器宽1170px
 *  md：容器宽970px
 *  sm：容器宽750px
 *  xs：宽度为auto
 *  margin-left/right：auto；
 *  padding-left/right：15px；
 *  ：before：防止子元素的margin越界
 *  ：after：防止子元素的margin越界，清除子元素浮动造成的影响

2、.container-fluid 流式容器，宽度随着父容器的改变而改变

*  width：auto；
 *  margin-left/right：auto；
 *  padding-left/right：15px；
 *  ：before：防止子元素的margin越界
 *  ：after：防止子元素的margin越界，清除子元素浮动造成的影响

--------------------

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th> 超小屏幕 <small>手机 (&lt;768px)</small> </th> 
   <th> 小屏幕 <small>平板 (≥768px)</small> </th> 
   <th> 中等屏幕 <small>桌面显示器 (≥992px)</small> </th> 
   <th> 大屏幕 <small>大桌面显示器 (≥1200px)</small> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>栅格系统行为</th> 
   <td>总是水平排列</td> 
   <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> 
  </tr> 
  <tr> 
   <th><code>.container</code> 最大宽度</th> 
   <td>None （自动）</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <th>类前缀</th> 
   <td><code>.col-xs-</code></td> 
   <td><code>.col-sm-</code></td> 
   <td><code>.col-md-</code></td> 
   <td><code>.col-lg-</code></td> 
  </tr> 
  <tr> 
   <th>列（column）数</th> 
   <td colspan="4">12</td> 
  </tr> 
  <tr> 
   <th>最大列（column）宽</th> 
   <td>自动</td> 
   <td>~62px</td> 
   <td>~81px</td> 
   <td>~97px</td> 
  </tr> 
  <tr> 
   <th>槽（gutter）宽</th> 
   <td colspan="4">30px （每列左右均有 15px）</td> 
  </tr> 
  <tr> 
   <th>可嵌套</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>偏移（Offsets）</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>列排序</th> 
   <td colspan="4">是</td> 
  </tr> 
 </tbody> 
</table>

--------------------

<h1 class="text-center">栅格布局系统</h1>
    <div class="container">
    
    
        <p class="text-center">一行中有一列</p>
        <div class="row">
            <div class="col-lg-1">LG-1</div>
        </div>
        <div class="row">
            <div class="col-lg-2">LG-2</div>
        </div>
        <div class="row">
            <div class="col-lg-3">LG-3</div>
        </div>
        <div class="row">
            <div class="col-lg-4">LG-4</div>
        </div>
        <div class="row">
            <div class="col-lg-5">LG-5</div>
        </div>
        <div class="row">
            <div class="col-lg-6">LG-6</div>
        </div>
        <div class="row">
            <div class="col-lg-7">LG-7</div>
        </div>
        <div class="row">
            <div class="col-lg-8">LG-8</div>
        </div>
        <div class="row">
            <div class="col-lg-9">LG-9</div>
        </div>
        <div class="row">
            <div class="col-lg-10">LG-10</div>
        </div>
        <div class="row">
            <div class="col-lg-11">LG-11</div>
        </div>
        <div class="row">
            <div class="col-lg-12">LG-12</div>
        </div>
    
    
    
        <p class="text-center">一行中有多列</p>
        <div class="row">
            <div class="col-lg-1">LG-1</div>
            <div class="col-lg-1">LG-1</div>
            <div class="col-lg-1">LG-1</div>
        </div>
        <div class="row">
            <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deleniti,
                doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa dignissimos doloremque enim modi
                tempore veritatis. Fugiat ipsum nostrum optio possimus totam.
            </div>
            <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae, delectus
                magni molestiae molestias non quaerat quod! Dolores explicabo illum incidunt ipsum libero possimus quos
                rerum sunt, suscipit temporibus unde.
            </div>
            <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis dolores
                expedita nostrum reiciendis. Ad, commodi dolor exercitationem explicabo in mollitia nisi perferendis, quo
                repellendus sapiente sequi similique temporibus voluptatibus!
            </div>
        </div>
    
    
    
        <p class="text-center">为同一个div指定在不同屏幕下的多个宽度值</p>
        <div class="row">
            <div class="col-md-6 col-sm-8 col-xs-12">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa
                dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.
            </div>
        </div>
    
    
    
    
        <p class="text-center">在某种屏幕下隐藏的列</p>
        <div class="row">
            <div class="col-xs-7 col-sm-6">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa
                dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.
            </div>
            <div class="col-xs-5 col-sm-4">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa
                dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.
            </div>
            <div class="col-sm-2 hidden-xs">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa
                dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.
            </div>
        </div>
    
    
    
    
        <p class="text-center">列的偏移</p>
        <div class="row">
            <div class="col-xs-2">
                LG-3 totam.
            </div>
            <div class="col-xs-2 col-xs-offset-2">
                LG-3 totam.
            </div>
        </div>

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

<table> 
 <tbody> 
  <tr> 
   <td><b>8.响应式表单</b></td> 
  </tr> 
 </tbody> 
</table>

三种表单：默认表单、行内表单、水平表单  
Bootsrap编码规范要求：所有的输入控件都必须有对应的label。若不想在界面中看到输入控件的label，可以声明仅屏幕阅读器可见：class=”sr-only”

--------------------

## 默认表单 ##

单选框、复选框必须使用label包含起来，省略for属性

> 表单样式： class=”form-control”  
> 下面注释样式：class=”help-block”  
> div分组样式：class=”form-group”  
> 单选框样式：class=”checkbox”（给父元素div用）

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

代码：

<form>
        <div class="form-group">
            <label for="uname">用户名：</label>
            <input class="form-control" type="text" id="uname" placeholder="请输入用户名："/>
            <span class="help-block">用户名必须包含数字、字母或下划线</span>
        </div>
        <div class="form-group">
            <label for="upwd">密码：</label>
            <input class="form-control" type="password" id="uname" placeholder="请输入密码："/>
            <span class="help-block">密码长度在6-12位之间</span>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">我同意本站的使用条款
            </label>
        </div>
        <input class="btn btn-success" type="button" value="提交" />
        <div class="checkbox">
            <label>
                <input type="checkbox">我同意本站的使用条款
            </label>
        </div>
    </form>

--------------------

## 行内表单 ##

> 行内样式： class=”form-inline”

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

代码：

--------------------

## 水平表单 ##

必须与变形后的栅格系统组合应用  
变形后的栅格系统：

*  .container=>.form-horizontal
 *  .row=>.form-group
 *  .col…不变

> 文本右对齐：class=”control-label”  
> 若想label中的文字左对齐，则col声明在div上；右对齐放在label上

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

代码：

<form class="form-horizontal">
        <div class="form-group">
            <div>
                <label for="uname3" class="control-label col-xs-2">用户名：</label>
            </div>
            <div class="col-xs-6">
                <input class="form-control" type="text" id="uname" placeholder="请输入用户名："/>
            </div>
            <div class="col-xs-4">
                <span class="help-block">用户名必须包含数字、字母或下划线</span>
            </div>
        </div>
        <div class="form-group">
            <div>
                <label for="upwd3" class="control-label col-xs-2">密码：</label>
            </div>
            <div class="col-xs-6">
                <input class="form-control" type="password" id="uname" placeholder="请输入密码："/>
            </div>
            <div class="col-xs-4">
                <span class="help-block">密码长度在6-12位之间</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">我同意本站的使用条款
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <input class="btn btn-success" type="button" value="提交"/>
            </div>
        </div>
    </form>

[http_www.w3school.com.cn_cssref_pr_box-sizing.asp]: http://www.w3school.com.cn/cssref/pr_box-sizing.asp
[SouthEast]: /images/20220608/8cc42ba922624175a424e0daea768037.png
[SouthEast 1]: /images/20220608/63c89bc91e8340e3b5e7fdd2734c3d0a.png
[SouthEast 2]: /images/20220608/ecd79b4e75434b10a7e71ae8c38b2031.png
[SouthEast 3]: /images/20220608/9ac28c513fb94dee889378959252b8c8.png
[SouthEast 4]: /images/20220608/b8aeadf5cbaa482d93d2297762b66fdb.png
[SouthEast 5]: /images/20220608/347735ce0e914ec6b4cc552cc75fcdb7.png
[SouthEast 6]: /images/20220608/1bb3012e073044a4b3af933f532eecef.png
[SouthEast 7]: /images/20220608/69c4ab045d6847bbb379acf93f49dfdf.png
[SouthEast 8]: /images/20220608/d1aeb5985c244c178d9d0fb6b3b11090.png
[SouthEast 9]: /images/20220608/9832463f21a84a1298f9aa56f639ec75.png
[SouthEast 10]: /images/20220608/964c4e7603904902a2fd218c9fba1d0a.png
[SouthEast 11]: /images/20220608/7e21650410414f69b38fa3bf075221cb.png
[SouthEast 12]: /images/20220608/5235124088ab4037890df22123f026e0.png
[SouthEast 13]: /images/20220608/00fdfed8e1274560910ef1416ea3c9cc.png
[SouthEast 14]: /images/20220608/6390f875a7d24f5eb3f95bfdec01dc40.png
[http_v3.bootcss.com_css_type]: http://v3.bootcss.com/css/#type
[SouthEast 15]: /images/20220608/70673bb2c20e481c8ca2884fe582413d.png
[SouthEast 16]: /images/20220608/84b9ff5c247141e6bd28c365f0f19787.png
[SouthEast 17]: /images/20220608/a14e58b86bcc4cc397d64d49e74d03f1.png
[SouthEast 18]: /images/20220608/ae8ea9faa70f44959e922245838fd556.png
[SouthEast 19]: /images/20220608/986fcf166e85468791703d4fca336f0c.png
[SouthEast 20]: /images/20220608/6b417e6473c24ebcaa26bab4b8f4a37b.png
[SouthEast 21]: /images/20220608/732e608a79bc430eac08ef698d705786.png