软件开发培训班 >> 编程开发 >> CSS


Bootstrap的CSS样式全面使用介绍

Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统 。HTML的基本元素均可以通过class设置样式并得到增强效果 。

1、基本设置

（1）使用 HTML5 文档类型 。

Bootstrap使用了 HTML5 元素和 Css属性，故需要使用 HTML5 。

（2）响应移动设备 。

移动设备与桌面设备的差别 在于 屏幕的大小，Bootstrap 使用 viewport 来控制屏幕的缩放 。

指的是让viewport的宽度等于物理设备上的真实分辨率，且不允许用户缩放 。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

【属性】
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素） 。
height：和 width 相对应，指定高度 。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例 。
maximum-scale：允许用户缩放到的最大比例 。
minimum-scale：允许用户缩放到的最小比例 。
user-scalable：用户是否可以手动缩放，可以传"yes"或"no" 。(大多数情况下有用，可以自己写js去实现)
shrink-to-fit：自适应手机屏幕宽度，shrink-to-fit=no属性是苹果专属的，在Safari IOS9开始引入，安，卓以及其他系统没有 。

2、网格（Grid）

（1）Bootstrap 网格系统（Grid System）

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列 。

（2）container

container 用于包裹页面上的内容，其左右外边距由浏览器决定 。

（3）使用 Grid

Step1：使用 container 包裹页面 。
Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 来划分网格 。
step3：使用 @media 来监控 屏幕大小的变化 。

/* 超小设备（手机，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

（4）举例：

<div class="container">
   <h1>Hello, world!</h1>
   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>
</div>

3、文本处理

（1）small 属性 、<small> 标签

写在父标签中，可以得到一个字体颜色浅、字体更小的文本 。

（2）常用文本属性

class="lead"             得到字体稍大、行高稍高的文本

class="text-left"        向左对齐文本

class="text-center"      居中对齐文本

class="text-right"       向右对齐文本

（3）补充文本属性

【以下几个属性大致相同，字体颜色不同】
class="text-muted"
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"

（4）<abbr> 标签　

<abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示title属性中的信息 。

（5）列表

class="list-unstyled"         用于去除列表的样式

class="list-inline"           用于将列表水平显示

dl、dt、dd                    用于自定义列表

class="dl-horizontal"         用于将自定义列表水平显示

4、表格

（1）常用表格标签

<table>         定义表格
<thead>         定义表格标题行
<tbody>         定义表格主体
<tr>            定义表格行
<td>            定义表格列
<th>            定义表格列（用于<thead>中）
<caption>       定义表格描述信息

（2）<table>常用属性

class="table"            基本表格样式，只有横向的分割线
class="table-striped"    给 tbody 添加条纹（表格间有色差） 。
class="table-bordered"   给所有的单元格添加边框
class="table-hover"      给 tbody 添加悬停样式（加个背景色）
class="table-condensed"  使表格样式更紧凑

（3）<tr>, <th> 和 <td>常用属性

几个属性会选中某行、某列数据，根据不同的属性，显示不同的颜色 。

class="active"           表示选中某条数据（有个阴影）
class="success"          表示成功
class="info"             表示信息变化
class="warning"          表示警告
class="danger"           表示危险

5、表单

（1）基本使用

使用 role="form" 声明 form 。
使用 class="form-inline" 将 form 改为一行显示（内联表单） 。
使用 class="form-group" 使表单控件间可以获取合适的间距 。
使用 class="form-control" 为文本 加个文本框 。
使用 class="checkbox" 为复选框添加样式 。

【举例：】

        <form class="form-inline" role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <br />
        <br />
        <!-- 使用 sr-only 可以隐藏表单控件-->
        <form class="form-inline sr-only" role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <br />
        <br />
        <form role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>

（2）按钮、下拉框

class="checkbox"              用于给复选框加样式，此时可以不用写 class="form-group"

class="radio"                 用于给单选框加样式

class="checkbox-inline"       将复选框显示在同一行

class="radio-inline"          将单选框显示在同一行

class="form-control"          可以修改select样式

【举例：】

<!-- 内联单选框、复选框样式 -->
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
    </label>
</div>
<!-- slect样式 -->
<div class="form-group">
    <label for="name">可多选的选择列表</label>
           <!-- multiple 表示可多选 -->
    <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

6、按钮

（1）基本属性

class="btn"                基本按钮样式
class="btn btn-default"    默认按钮样式
class="btn btn-primary"    原始按钮样式
class="btn btn-success"    成功按钮样式
class="btn btn-info"       信息按钮样式
class="btn btn-warning"    警告按钮样式
class="btn btn-danger"     危险按钮样式
class="btn btn-link"       链接按钮样式
class="btn btn-lg"        大的基本按钮样式
class="btn btn-sm"        小的基本按钮样式
class="btn btn-xs"        特别小的基本按钮样式
class="btn btn-block"     块级的基本按钮样式，默认会填充满父标签的宽度

（2）按钮激活、禁用

class="btn active"         定义激活按钮样式，背景色会改变（有色差）
class="btn disabled"       定义禁止按钮样式，背景色会变（可能有些效果不能完全禁用） 。

（3）按钮组

class="btn-group"           创建一个按钮组
class="btn-group-lg"        创建一个大按钮组
class="btn-group-sm"        创建一个小按钮组
class="btn-group-xs"        创建一个特别小按钮组
class="btn-group-vertical"  创建一个垂直的按钮组
class="btn-group-justified" 创建一个自适应大小的按钮组（若内部是<button>标签，需给其加一个class="btn-group"）
class="dropdown-menu" + class="caret"      可以创建一个有下拉框的按钮

7、辅助样式

（1）背景样式

class="bg-primary"
class="bg-success"
class="bg-info"
class="bg-warning"
class="bg-danger"

（2）浮动与隐藏

class="pull-left"         元素浮动在左侧
class="pull-right"        元素浮动在右侧
class="text-center"       元素居中
class="show"              元素显示
class="hidden"            元素隐藏
class="sr-only"           元素隐藏
class="text-hide"         元素隐藏

到此这篇关于Bootstrap的CSS样式全面使用介绍的文章就介绍到这了,更多相关Bootstrap全局 CSS 样式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！