BootStrap常用样式

常用样式

排版

标题

​ Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> 到 <h6>, 只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。同时后面可以紧跟着一行小的副标题或使用.small

<h1>h1. Bootstrap heading<small> 副标题 </small></h1>
<div class="h1">Bootstrap 标题 1 <span class="small"> 副标题 </span></div>

段落

​ 段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用以下标签给文本做突出样式处理：

​ : 小号字

​ : 加粗

​ : 斜体

<p class="lead"><small> 以后的 </small><b> 你 </b> 会 <i> 感谢 </i> 现在 <em> 努力 </em> 的 <strong> 你 </strong></p>

强调

​ 定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：

​ .text-muted：提示，使用浅灰色（#999）

       .text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d)

        .text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442）

<div class="text-muted"> 提示效果 </div>
<div class="text-primary"> 主要效果 </div>
<div class="text-success"> 成功效果 </div>
<div class="text-info"> 信息效果 </div>
<div class="text-warning"> 警告效果 </div>
<div class="text-danger"> 危险效果 </div>

对齐效果

​ 在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。

​ 其中主要有四种风格：

​ 左对齐，取值 left ;

​ 居中对齐，取值 center;

​ 右对齐，取值 right ;

​ 两端对齐，取值 justify。

​ 为了简化操作，方便使用，Bootstrap 通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。

<p class="text-left"> 我居左 </p>
<p class="text-center"> 我居中 </p>
<p class="text-right"> 我居右 </p>
<p class="text-justify"> 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份 </p>

列表

​ 在 HTML 文档中，列表结构主要有三种：

​ 无序列表(<ul><li>…</li></ul>)

​ 有序列表(<ol><li>…</li></ol>)

​ 定义列表(<dl><dt>…</dt><dd>…</dd></dl>)

去点列表

​ class=”list-unstyled”

<ul class="list-unstyled">
    <li> 无序项目列表一 </li>
    <li> 无序项目列表二 </li>
</ul>

内联列表

​ class=”list-inline”，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

<ul class="list-inline">
    <li> 首页 </li>
    <li>java 学院 </li>
    <li> 在线课堂 </li>
</ul>

定义列表

​ 在原有的基础加入了一些样式，使用样式 class=”dl-horizontal” 制作水平定义列表 : 当标题宽度超过 160px 时，将会显示三个省略号。

<dl>
    <dt>HTML</dt>
    <dd> 超文本标记语言 </dd>
    <dt>CSS</dt>
    <dd> 层叠样式表是一种样式表语言 </dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言 </dt>
    <dd>HTML 称为超文本标记语言，是一种标识性的语言。</dd>           
    <dt> 测试标题不能超过 160px 的宽度, 否则 2 个点 </dt>
    <dd> 我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>

代码

​ 一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：

​（1）使用 来显示单行内联代码

​（2）使用 <pre></pre> 来显示多行块代码

​ 样式：pre-scrollable (height,max-height 高度固定, 为 340px, 超过存在滚动条)

​（3）使用 来显示用户输入代码, 如快捷键

单行内联代码

<code>this is a simple code</code>

快捷键

<p> 使用 <kbd>ctrl+s</kbd> 保存 </p>

多行块代码

<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {public static void main(String[] args){System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    显示 html 标签的代码需要适应字符实体  
    小于号（<）要使用硬编码“&lt;”来替代，大于号 (>) 使用“&gt;”来替代 
-->
<pre>
    &lt;ul&gt;
        &lt;li&gt; 测试实体符 &lt;/li&gt;
    &lt;/ul&gt;
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
    <ol>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
    </ol>
</pre>

表格

表格样式

​ Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：

​ 基础样式

​ 1）.table：基础表格

​ 附加样式

​ 1) .table-striped：斑马线表格

​ 2) .table-bordered：带边框的表格

​ 3) .table-hover：鼠标悬停高亮的表格

​ 4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

tr、th、td 样式

​ 提供了五种不同的类名，每种类名控制了行的不同背景颜色

<table class="table table-bordered table-hover">
    <tr class="active">
        <th>JavaSE</th>
        <th> 数据库 </th>
        <th>JavaScript</th>
    </tr>
    <tr class="danger">
        <td> 面向对象 </td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="success">
        <td> 数组 </td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>

表单

​ 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

​ .form-control .input-lg（较大）.input-sm（较小）

输入框 text

​ .form-control

<div class="col-sm-3">
    <input type="text" name=""id="" class="form-control" />
    <input type="text" name=""id="" class="form-control input-lg" />
    <input type="text" name=""id="" class="form-control input-sm" />
</div>

下拉选择框 select

​ 多行选择设置：multiple=”multiple”

<div class="col-sm-3">
    <select class="form-control">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
    <select class="form-control" multiple="multiple">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
</div>

文本域 textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

复选框 checkbox

​ 垂直显示：.checkbox

​ 水平显示：.checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" > 游戏 </label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" > 学习 </label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" > 游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" > 学习
    </label>
</div>

单选框 radio

​ 垂直显示：.radio

​ 水平显示：.radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" > 男 </label>
    </div>
    <div class="radio">
        <label><input type="radio" > 女 </label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" > 男
    </label>
    <label class="radio-inline">
        <input type="radio" > 女
    </label>
</div>

按钮

1）使用 button 实现

​ 基础样式：btn

<button class="btn"> 按钮 </button>

​ 附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger"> 按钮 </button>
<button class="btn btn-primary"> 按钮 </button>
<button class="btn btn-info"> 按钮 </button>
<button class="btn btn-success"> 按钮 </button>
<button class="btn btn-default"> 按钮 </button>
<button class="btn btn-warning"> 按钮 </button>
<button class="btn btn-link"> 按钮 </button>

2）多标签支持：使用 a div 等制作按钮

<a href="##" class="btn btn-info">a 标签按钮 </a>
<span class="btn btn-success">span 标签按钮 </span>
<div class="btn btn-warning">div 标签按钮 </div>

3）按钮大小

​ 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<button class="btn btn-primary btn-xs"> 超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm"> 小型按钮.btn-sm</button>
<button class="btn btn-primary"> 正常按钮 </button>
<button class="btn btn-primary btn-lg"> 大型按钮.btn-lg</button> 

4）按钮禁用

​ 方法 1：在标签中添加 disabled 属性

<button class="btn btn-danger" disabled="disabled"> 禁用按钮 </button>

​ 方法 2：在元素标签中添加类名 ”disabled”

<button class="btn btn-danger disabled"> 禁用按钮 </button>

​ 在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用了此按钮！

表单布局

​ 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

• 向父 <form> 元素添加 role=”form”。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =”form-control”。

水平表单

​ 同一行显示 form-horizontal

​ 配合 Bootstrap 框架的网格系统

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2"> 邮箱 </label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入邮箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2"> 密码 </label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default"> 提交 </button>
        </div>
    </div>
</form>

内联表单

​ 将表单的控件都在一行内显示 form-inline

​ 注意 label 不会显示，存在的意义：如果没有为输入控件设置 label 标签，屏幕阅读器将无法正确识别。

<form class="form-inline">
    <div class="form-group">
        <label for="email" > 邮箱 </label>
        <input type="email" class="form-control" placeholder="请输入邮箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" > 密码 </label>
            <input type="pwd" class="form-control" placeholder="请输入密码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" /> 记住密码 </label>
    </div>
    <div class="form-group">
        <button class="btn btn-default"> 提交 </button>
    </div>
</form>

缩略图

​ 缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/IMG_0131.JPG" alt="...">
                   <h3> 高圆圆 </h3>
                   <p> 出生于北京市，中国内地影视女演员、模特。</p>
                   <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span> 喜欢 </button>
                   <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span> 评论
                </button>
               </div>
        </div>
    </div>
</div>

面板

​ 默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

​ .panel-default：默认样式

​ .panel-heading：面板头

​ .panel-body：面板主体内容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>