Bootstrap框架--1.3常用样式

一、标题

定义标题使用标签<h1>到<h6>，为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名，同时后面可以紧跟着一行小的副标题<small></small>或使用.small

<h1>h1<small>副标题</small></h1>
<div class="h1"><span class="small">副标题</span></div>

二、段落

通过.lead来突出强调内容，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理：

<small>:小号字

<b><strong>：加粗

<i><em>:斜体

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

三、强调

 四、对齐

五、列表

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

无序列表（<ul><li>...</li></ul>）

有序列表（<ol><li>...</li></ol>）

定义列表（<dl><dt>...</dt><dd>...</dd></dl>）dt是标题，dd是内容。

1.去点列表(没有序号)

class="list-unstyled"

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

2.内联列表

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

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

3.定义列表

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

<dl class="dl-horizontal">
    <dt>HTML超文本标记语言</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
</dl>

六、代码

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

(1)使用<code></code>来显示单行内联代码。

(2)使用<pre></pre>来显示多行块代码。

样式：pre-srollable（height,max-height高度固定，为340px,超过存在滚动条）

显示html代码需要使用字符实体，如：&lt;(<)、&gt;(>)

(3)使用<kbd></kbd>来显示用户输入代码，如快捷键(键盘效果)。

<code>这是单行代码。</code>
<p>使用<kbd>ctrl+s</kbd>保存</p>

//代码会保留原本的格式，包括空格和换行
<pre>
    public class HelloWorld{
        public static void main(String[] args){
            System.out.println("Hello")
        }
    }
</pre>

七、表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

基础样式：.table：基础表格

附加样式：1).table-striped:斑马线表格

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

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

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

<table class="table table-bordered table-striped table-hover table-condensed">
    <tr class="info">
    </tr>
    <tr class="danger">
    </tr>
</table>

 八、表单

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

1.文本框input

样式：.form-control

大小：.input-lg、.input-sm

<div class="row">
    <div class="col-md-3">
        <input type="text" class="form-control input-lg"/>
    </div>
</div>

2.下拉框select

样式：.form-control

<div>
    <div class="col-md-3">
        <select class="form-control">
            <option>请选择城市</option>
            <option>北京</option>
            <option>上海</option>
        </select>
        <select class="form-control" multiple="multiple">//设置下拉框多选，按住ctrl可以选多个
            <option>请选择城市</option>
            <option>北京</option>
            <option>上海</option>
        </select>
    </div>
</div>

3.文本域textarea

样式：.form-control

<textarea class="form-control"></textarea>

4.复选框checkbox

垂直显示：.checkbox

水平显示：.checkbox-inline

<div class="row">
    <div class="col-md-3">
        //垂直方向多选框
        <div class="checkbox">
            <label><input type="checkbox"/>唱歌</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox"/>跳舞</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        //水平方向多选框
        <label class="checkbox-inline">
            <input type="checkbox"/>唱歌
        </label>
        <label class="checkbox-inline">
            <input type="checkbox"/>跳舞
        </label>
    </div>
</div>

5.单选框radio

垂直显示：.radiobox

水平显示：.radiobox-inline

<div class="row">
    <div class="col-md-3">
        //垂直方向单选框
        <div class="radio">
            <label><input type="radio"/>男</label>
        </div>
        <div class="radio">
            <label><input type="radio"/>女</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        //水平方向单选框
        <label class="radio-inline">
            <input type="radio"/>男
        </label>
        <label class="radio-inline">
            <input type="radio"/>女
        </label>
    </div>
</div>

6.按钮button

<button></button><input type="button"/>

1）使用button实现

基础样式：btn

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

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

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

3）按钮大小

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

4)按钮禁用

方法1：在标签中添加disabled属性。功能和样式都呈现禁用。

<button class="btn" disabled="disabled"></button>

方法2：在标签中添加类名“disabled”,只是样式上禁用，功能不被禁用。

<button class="btn disabled"></button>

7.标签label

样式：.control-label

for="id"，点击标签时，id名的input获得焦点。

<label class="control-label"></label>

九、表单布局

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

1）向父<form>元素添加role="form"

2）把标签和控件放在一个带有class.form-group的<div>中,这是获取最佳间距所必需的。

3）向所有的文本元素<input>、<textarea>和<select>添加class="form-control"

1、水平表单

同一行显示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>
</form>

2.内联表单

将表单的控件都在一行内显示form-inline，设置网格没有意义，一般用于快捷登录，只有用户名和密码。

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

<form class="form-inline">
    <div class="form-group">
        <label for="email" class="control-label">邮箱</label>
        <div>
            <input type="email" class="form-control" placeholder="请输入邮箱"/>
        </div>
    </div>
</form>

十、缩略图

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

class="thumbnail"

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
            </div>
        </div>
    </div>
</div>

字体图标参考网站：Bootstrap 字体图标(Glyphicons) | 菜鸟教程

十一、面板

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

.panel-default:默认样式

.panel-heading:面板头

.panel-body:面板主体内容

.panel-success、.panel-warning:主题颜色，可以自己选择。

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