Bootstrap的CSS样式全面使用介绍

做家纺的老李 發表於 2023-7-28 09:34:20

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1、基本设置</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">（1）使用 HTML5 文档类型。</a></li><li><a href="#_lab2_0_1">（2）响应移动设备。</a></li></ul><li><a href="#_label1">2、网格（Grid）</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_2">（1）Bootstrap 网格系统（Grid System）</a></li><li><a href="#_lab2_1_3">（2）container</a></li><li><a href="#_lab2_1_4">（3）使用 Grid</a></li><li><a href="#_lab2_1_5">（4）举例：</a></li></ul><li><a href="#_label2">3、文本处理</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_6">（1）small 属性、<small> 标签</a></li><li><a href="#_lab2_2_7">（2）常用文本属性</a></li><li><a href="#_lab2_2_8">（3）补充文本属性</a></li><li><a href="#_lab2_2_9">（4）<abbr> 标签　</a></li><li><a href="#_lab2_2_10">（5）列表</a></li></ul><li><a href="#_label3">4、表格</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_11">（1）常用表格标签</a></li><li><a href="#_lab2_3_12">（2）<table>常用属性</a></li><li><a href="#_lab2_3_13">（3）<tr>, <th> 和 <td>常用属性</a></li></ul><li><a href="#_label4">5、表单</a></li><ul class="second_class_ul"><li><a href="#_lab2_4_14">（1）基本使用</a></li><li><a href="#_lab2_4_15">（2）按钮、下拉框</a></li></ul><li><a href="#_label5">6、按钮</a></li><ul class="second_class_ul"><li><a href="#_lab2_5_16">（1）基本属性</a></li><li><a href="#_lab2_5_17">（2）按钮激活、禁用</a></li><li><a href="#_lab2_5_18">（3）按钮组</a></li></ul><li><a href="#_label6">7、辅助样式</a></li><ul class="second_class_ul"><li><a href="#_lab2_6_19">（1）背景样式</a></li><li><a href="#_lab2_6_20">（2）浮动与隐藏</a></li></ul></ul></div><p>Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。HTML的基本元素均可以通过class设置样式并得到增强效果。</p>
<p class="maodian"><a name="_label0"></a></p><h2>1、基本设置</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>（1）使用 HTML5 文档类型。</h3>
<p>Bootstrap使用了 HTML5 元素和 Css属性，故需要使用 HTML5。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>（2）响应移动设备。</h3>
<p>移动设备与桌面设备的差别在于屏幕的大小，Bootstrap 使用 viewport 来控制屏幕的缩放。</p>
<p>指的是让viewport的宽度等于物理设备上的真实分辨率，且不允许用户缩放。</p>
<div class="jb51code"><pre class="brush:xhtml;"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /></pre></div>
<blockquote><p>【属性】<br />width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。<br />height：和 width 相对应，指定高度。<br />initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。<br />maximum-scale：允许用户缩放到的最大比例。<br />minimum-scale：允许用户缩放到的最小比例。<br />user-scalable：用户是否可以手动缩放，可以传"yes"或"no"。(大多数情况下有用，可以自己写js去实现)<br />shrink-to-fit：自适应手机屏幕宽度，shrink-to-fit=no属性是苹果专属的，在Safari IOS9开始引入，安，卓以及其他系统没有。</p></blockquote>
<p class="maodian"><a name="_label1"></a></p><h2>2、网格（Grid）</h2>
<p class="maodian"><a name="_lab2_1_2"></a></p><h3>（1）Bootstrap 网格系统（Grid System）</h3>
<p>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。</p>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>（2）container</h3>
<p>container 用于包裹页面上的内容，其左右外边距由浏览器决定。</p>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>（3）使用 Grid</h3>
<p>Step1：使用 container 包裹页面。<br />Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 来划分网格。<br />step3：使用 @media 来监控屏幕大小的变化。</p>
<div class="jb51code"><pre class="brush:css;">/* 超小设备（手机，小于 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) { ... }</pre></div>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>（4）举例：</h3>
<div class="jb51code"><pre class="brush:xhtml;"><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></pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>3、文本处理</h2>
<p class="maodian"><a name="_lab2_2_6"></a></p><h3>（1）small 属性、<small> 标签</h3>
<p>写在父标签中，可以得到一个字体颜色浅、字体更小的文本。</p>
<p class="maodian"><a name="_lab2_2_7"></a></p><h3>（2）常用文本属性</h3>
<blockquote><p>class="lead"             得到字体稍大、行高稍高的文本</p>
<p>class="text-left"        向左对齐文本</p>
<p>class="text-center"      居中对齐文本</p>
<p>class="text-right"       向右对齐文本</p></blockquote>
<p class="maodian"><a name="_lab2_2_8"></a></p><h3>（3）补充文本属性</h3>
<blockquote><p>【以下几个属性大致相同，字体颜色不同】<br />class="text-muted"<br />class="text-primary"<br />class="text-success"<br />class="text-info"<br />class="text-warning"<br />class="text-danger"</p></blockquote>
<p class="maodian"><a name="_lab2_2_9"></a></p><h3>（4）<abbr> 标签　</h3>
<p><abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示title属性中的信息。</p>
<p class="maodian"><a name="_lab2_2_10"></a></p><h3>（5）列表</h3>
<blockquote><p>class="list-unstyled"         用于去除列表的样式</p>
<p>class="list-inline"           用于将列表水平显示</p>
<p>dl、dt、dd                    用于自定义列表</p>
<p>class="dl-horizontal"         用于将自定义列表水平显示</p></blockquote>
<p class="maodian"><a name="_label3"></a></p><h2>4、表格</h2>
<p class="maodian"><a name="_lab2_3_11"></a></p><h3>（1）常用表格标签</h3>
<div class="jb51code"><pre class="brush:xhtml;"><table>       定义表格
<thead>       定义表格标题行
<tbody>       定义表格主体
<tr>          定义表格行
<td>          定义表格列
<th>          定义表格列（用于<thead>中）
<caption>    定义表格描述信息</pre></div>
<p class="maodian"><a name="_lab2_3_12"></a></p><h3>（2）<table>常用属性</h3>
<div class="jb51code"><pre class="brush:xhtml;">class="table"          基本表格样式，只有横向的分割线
class="table-striped" 给 tbody 添加条纹（表格间有色差）。
class="table-bordered" 给所有的单元格添加边框
class="table-hover"    给 tbody 添加悬停样式（加个背景色）
class="table-condensed"使表格样式更紧凑</pre></div>
<p class="maodian"><a name="_lab2_3_13"></a></p><h3>（3）<tr>, <th> 和 <td>常用属性</h3>
<p>几个属性会选中某行、某列数据，根据不同的属性，显示不同的颜色。</p>
<div class="jb51code"><pre class="brush:xhtml;">class="active"       表示选中某条数据（有个阴影）
class="success"       表示成功
class="info"          表示信息变化
class="warning"       表示警告
class="danger"       表示危险</pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>5、表单</h2>
<p class="maodian"><a name="_lab2_4_14"></a></p><h3>（1）基本使用</h3>
<blockquote><p>使用 role="form" 声明 form。<br />使用 class="form-inline" 将 form 改为一行显示（内联表单）。<br />使用 class="form-group" 使表单控件间可以获取合适的间距。<br />使用 class="form-control" 为文本加个文本框。<br />使用 class="checkbox" 为复选框添加样式。</p></blockquote>
<p>【举例：】</p>
<div class="jb51code"><pre class="brush:xhtml;">    <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 />
   
   <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></pre></div>
<p class="maodian"><a name="_lab2_4_15"></a></p><h3>（2）按钮、下拉框</h3>
<blockquote><p>class="checkbox"              用于给复选框加样式，此时可以不用写 class="form-group"</p>
<p>class="radio"                 用于给单选框加样式</p>
<p>class="checkbox-inline"       将复选框显示在同一行</p>
<p>class="radio-inline"          将单选框显示在同一行</p>
<p>class="form-control"          可以修改select样式</p></blockquote>
<p>【举例：】</p>
<div class="jb51code"><pre class="brush:xhtml;">
<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>

<div class="form-group">
<label for="name">可多选的选择列表</label>
      
<select multiple class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
</select>
</div></pre></div>
<p class="maodian"><a name="_label5"></a></p><h2>6、按钮</h2>
<p class="maodian"><a name="_lab2_5_16"></a></p><h3>（1）基本属性</h3>
<div class="jb51code"><pre class="brush:xhtml;">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" 块级的基本按钮样式，默认会填充满父标签的宽度</pre></div>
<p class="maodian"><a name="_lab2_5_17"></a></p><h3>（2）按钮激活、禁用</h3>
<div class="jb51code"><pre class="brush:xhtml;">class="btn active"       定义激活按钮样式，背景色会改变（有色差）
class="btn disabled"    定义禁止按钮样式，背景色会变（可能有些效果不能完全禁用）。</pre></div>
<p class="maodian"><a name="_lab2_5_18"></a></p><h3>（3）按钮组</h3>
<div class="jb51code"><pre class="brush:xhtml;">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"    可以创建一个有下拉框的按钮</pre></div>
<p class="maodian"><a name="_label6"></a></p><h2>7、辅助样式</h2>
<p class="maodian"><a name="_lab2_6_19"></a></p><h3>（1）背景样式</h3>
<div class="jb51code"><pre class="brush:xhtml;">class="bg-primary"
class="bg-success"
class="bg-info"
class="bg-warning"
class="bg-danger"</pre></div>
<p class="maodian"><a name="_lab2_6_20"></a></p><h3>（2）浮动与隐藏</h3>
<div class="jb51code"><pre class="brush:xhtml;">class="pull-left"       元素浮动在左侧
class="pull-right"    元素浮动在右侧
class="text-center"    元素居中
class="show"          元素显示
class="hidden"          元素隐藏
class="sr-only"       元素隐藏
class="text-hide"       元素隐藏</pre></div>

頁: [1]

琼殿技术论坛's Archiver

Bootstrap的CSS样式全面使用介绍