基本的HTML模板

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

排版

  • 标题<h1>到<h6>：标题后面紧跟着一行小的副标题使用<small>

    <h1>Bootstrap标题一<small>我是副标题</small></h1>

  • 段落<p>

    1 全局文本字号为14px(font-size)

    2 行高为1.42857143（line-height），大约是20px、颜色为深灰色（#333）

    3 字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）

  • 强调内容

    1 类lead(突出段落)<p class="lead" >

    2 文件加粗<strong>

    3 斜体<em>

    4 小号(取85%)<small>

    5 正常<cite>

  • 强调相关的类，示例<div class="text-warning">：

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

    .text-primary：主要，使用蓝色（#428bca）

    .text-success：成功，使用浅绿色(#3c763d)

    .text-info：通知信息，使用浅蓝色（#31708f）

    .text-warning：警告，使用黄色（#8a6d3b）

    .text-danger：危险，使用褐色（#a94442）

  • 文本对齐，示例<p class="text-right">

    .text-left：左对齐

    .text-center：居中对齐

    .text-right：右对齐

    .text-justify：两端对齐

  • 列表

    有序列表<ol>

    无序列表<ul>

    去点列表<ol class="list-unstyled">

    内联列表(为制作水平导航而生)<ul class="list-inline">

    定义列表<dl><dt></dt><dd></dd><dd></dd><dl>

    水平定义列表<dl class="dl-horizontal"><dt></dt><dd></dd><dd></dd><dl>，只有屏幕大于768px的时候，添加类名.dl-horizontal才具有水平定义列表效果

  • 代码风格，管使用哪种代码风格，在代码中碰到小于号<要使用硬编码&lt;来替代，大于号>使用&gt;来替代。

    <code>：一般是针对于单个单词或单个句子的代码

    <pre>：一般是针对于多行代码（也就是成块的代码）

    <kbd>:一般是表示用户要通过键盘输入的内容

  • 表格是Bootstrap的一个基础组件之一，在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名table。

    .table：基础表格

    .table-striped：斑马线表格

    .table-bordered：带边框的表格

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

    .table-condensed：紧凑型表格

    .table-responsive：响应式表格，加在容器上，而不是表格table上

  • 表格--表格行的类，要实现悬浮状态，需要在<table>标签上加入table-hover类。bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色

    active success info warning danger

表单

表单控件

  • 使用类名form-control。<input type="password" class="form-control" placeholder="请输入您的邮箱密码">

  • 水平表单

    1 在<form>元素是使用类名form-horizontal

    2 配合Bootstrap框架的网格系统。

    3 一个.form-group一行

  • 内联表单，在<form>元素中添加类名form-inline

    1 此时，在input前面添加一个label标签时，会导致input换行显示。

    2 如果必须添加这样的一个label标签，并且不想让input换行，需要将label标签也放在容器form-group中

    3 没有为输入控件设置label标签，屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处，为残障人员进行了一定的考虑。可以加类隐藏label<label class="sr-only">

  • 表单控件(输入框input)

    1 必须添加type类型

    2 为了让控件在各种表单风格中样式不出错，需要添加类名form-control

  • 表单控件(下拉选择框select)，原始的一致，多行选择设置multiple属性的值为multiple

  • 表单控件(文本域textarea)，和原始使用方法一样，添加了类名“form-control”类名，宽度将为100%或auto

  • 表单控件(复选框checkbox和单选择按钮radio)

    1 不管是checkbox还是radio都使用label包起来了

    2 checkbox连同label标签放置在一个名为.checkbox的div容器内

    3 radio连同label标签放置在一个名为.radio的div容器内

    4 主要借助.checkbox和.radio样式，来处理复选框、单选按钮与标签的对齐方式。

  • 表单控件(复选框和单选按钮水平排列)

    1 如果checkbox需要水平排列，只需要在label标签上添加类名.checkbox-inline

    2 如果radio需要水平排列，只需要在label标签上添加类名radio-inline

  • 表单控件大小

    1、.input-sm:让控件比正常大小更小

    2、.input-lg:让控件比正常大小更大

    3、借住Bootstrap框架的网格系统 控制表单宽度

    4、.form-group就相当于网格系统中的.row

  • 表单控件状态(禁用状态)

    1 在需要禁用的表单控件上加上disabled，<input type="text" disabled >

    2 如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

  • 表单控件状态(验证状态)

    1、.has-warning:警告状态（黄色）

    2、.has-error：错误状态（红色）

    3、.has-success：成功状态（绿色）

    4、为不同状态表单设置icon，只需要在应的状态下添加类名has-feedback

  • 表单提示信息

    使用了一个.help-block样式，将提示信息以块状显示，并且显示在控件底部。

    在Bootstrap V2.x版本中，使用类名help-inline，使在同一行显示

    在BootstrapV3.x版本，需要借助于Bootstrap的网格系统

表单控件示例

<!-- form-horizontal水平表单，还有内联表单form-inline -->

<form class="form-horizontal" role="form">

    <h1>登录，大小输入框，验证状态，提示信息</h1>

    <!-- form-group相当于网格系统中的row -->

    <!-- has-error错误状态（红色），还有has-warning与has-success -->

    <!-- has-feedback为不同状态表单设置icon -->

    <div class="form-group has-error has-feedback">

        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

        <!-- col-sm-4利用网格系统控制表单宽度 -->

        <div class="col-sm-4">

            <!-- form-control控件表单风格样式不出错 -->

            <!-- input-lg大控件，还有input-sm -->

            <!-- glyphicon glyphicon-remove删除图标 -->

            <input type="email" class="form-control input-lg" id="inputEmail3" placeholder="请输入您的邮箱地址"> <span

                class="glyphicon glyphicon-remove form-control-feedback input-lg"></span>

        </div>

    </div>

    <div class="form-group has-warning">

        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

        <div class="col-sm-10">

            <div class="row">

                <div class="col-xs-6">

                    <input type="password" class="form-control input-sm" id="inputPassword3" placeholder="请输入您的邮箱密码">

                </div>

                <!-- help-block表单提示信息，显示在控件底部，此处使用网格系统使之与password在同一行 -->

                <span class="col-xs-6 help-block">你输入的信息是正确的</span>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <!-- 复选框，如果需要水平排列，只需要在label标签上添加类名.checkbox-inline -->

            <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 type="submit" class="btn btn-primary">进入邮箱</button>

        </div>

    </div>

    <h1>下拉框，禁用下拉第一框</h1>

    <div class="form-group">

        <select class="form-control">

            <option disabled>1</option>

            <option>2</option>

        </select>

    </div>

    <h1>水平单选</h1>

    <div class="form-group">

        <label class="radio-inline"> <input type="radio" name="gender" value="male">男性</input>

        </label> <label class="radio-inline"> <input type="radio" name="gender" value="female">女性</input>

        </label>

    </div>

</form>

按钮

  • 7种按钮风格，3种大小及块状按钮
<button class="btn" type="button">基础按钮.btn</button>

<button class="btn btn-default" type="button">默认按钮.btn-default</button>

<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

<button class="btn btn-success" type="button">成功按钮.btn-success</button>

<button class="btn btn-info" type="button">信息按钮.btn-info</button>

<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

<button class="btn btn-link" type="button">链接按钮.btn-link</button> 

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>

<button class="btn btn-primary" type="button">正常按钮</button>

<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

<button class="btn btn-primary btn-xs" type="button">超小型按钮</button>

<button class="btn btn-primary btn-block" type="button">块状按钮</button>
  • 禁用按钮

    1 在标签中添加disabled属性，可以禁止元素的默认行为的

    2 在元素标签中添加类名“disabled”，不会禁止按钮的默认行为

图像

<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">

Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

使用方法非常简单，只需要在标签上添加对应的类名

可以通过控制容器的大小来设置图片大小

圆角使用css3，IE8以及其以下版本不支持圆角

图标

<span class="glyphicon glyphicon-search"></span>

所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称

所有名称查看：

请点击：http://getbootstrap.com/components/#glyphicons 链接查阅

网格系统

  • 实现原理

    Bootstrap框架中的网格系统就是将容器平分成12份。

  • 工作原理

    1、数据行.row必须包含在容器.container中，以便为其赋予合适的对齐方式和内距padding

    2、在行.row中可以添加列.col-md-数字，但列数之和不能超过平分的总列数，比如12

    3、具体内容应当放置在列容器.col-md-数字之内，而且只有列.col-md-数字才可以作为行容器.row的直接子元素

    4、通过设置内距padding从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距margin来抵消内距padding的影响

  • 基本用法

    Bootstrap框架的网格系统中有四种基本的用法，架在不同屏幕尺寸使用了不同的网格样式

    .col-xs-：屏宽auto，列宽auto

    .col-sm-：屏宽750px，列宽~62px

    .col-md-：屏宽970px，列宽~81px

    .col-lg-：屏宽1170px，列宽~97px

  • 列偏移

    1 只需要在列元素上添加类名col-md-offset-*(其中星号代表要偏移的列组合数)

    2 要保证列与偏移列的总数不超过12，不然会致列断行显示

  • 列排序

    列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-* (其中星号代表移动的列组合数)。

  • 列的嵌套

    1 可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

    2 嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示

网格系统示例

<div class="container">

    <h4>列向右移动四列的间距</h4>

    <div class="row">

        <div class="col-md-4">列1</div>

        <div class="col-md-2 col-md-offset-4">列向右移动四列后的列2</div>

        <div class="col-md-2">列3</div>

    </div>

    <div class="row">

        <div class="col-md-4">列1</div>

        <div class="col-md-4 col-md-offset-4">列向右移动四列后的列2</div>

    </div>

</div>

菜单、按钮组及导航

下拉菜单

  • 注意

    1 在Bootstrap框架中的下拉菜单组件是一个独立的组件

    2 必定会调用Bootstrap框架提供的bootstrap.js文件

    3 在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果

  • 基本用法

    1 使用一个名为dropdown的容器包裹了整个下拉菜单元素，示例：<div class="dropdown"></div>

    2 使用了一个<button>按钮做为父菜单，并且定义类名dropdown-toggle和自定义data-toggle属性，且值必须和最外容器类名一致，示例：data-toggle="dropdown"

    3 下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu，示例：<ul class="dropdown-menu">

  • 下拉分隔线

    可以通过添加一个空的<li>，并且给这个<li>添加类名divider来实现添加下拉分隔线的功能

    <li role="presentation" class="divider"></li>

  • 菜单标题，与添加下拉分隔线类似，添加类名.dropdown-header

    <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

  • 对齐方式

    1 默认是左对齐

    2 在dropdown-menu上添加一个pull-right或者dropdown-menu-right类名，让下拉菜单相对于父容器右对齐

    3 使用dropdown-menu-left，实现与父窗口左对齐

  • 菜单项状态

    在对应的菜单项上添加对应的类名，当前状态.active和禁用状态.disabled

  • 示例

<!-- dropdown容器 -->

<div class="dropdown">

    <!-- button父菜单：类名dropdown-toggle，自定义data-toggle值需与最外容器类名一致，当前即为dropdown -->

    <!-- span中的caret为向下三角形，若最外容器为dropup，则为向上三角形 -->

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span class="caret"></span>

    </button>

    <!-- dropdown-menu使用ul定义下拉菜单列表 -->

    <!-- pull-right让下拉菜单相对于父容器右对齐，与dropdown-menu-right一样 -->

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <!-- disabled禁用状态 -->

        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <!-- divider下拉分隔线 -->

        <li role="presentation" class="divider"></li>

        <!-- dropdown-header菜单标题 -->

        <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

    </ul>

</div>

按钮组

  • 按钮组

    使用一个名为btn-group的容器，把多个按钮放到这个容器中

  • 按钮组大小

    1 .btn-group-lg: 大按钮组

    2 .btn-group-sm:小按钮组

    3 .btn-group-xs:超小按钮组

  • 按钮工具栏

    将按钮组.btn-group按组放在一个大的容器.btn-toolbar

  • 嵌套分组，实现类似于导航菜单的效果。

    只需要把当初制作下拉菜单的dropdown的容器换成btn-group，并且和普通的按钮放在同一级

  • 垂直分组

    只需要把水平分组的btn-group类名换成btn-group-vertical即可

  • 等分按钮

    只需要在按钮组btn-group上追加一个btn-group-justified类名

    在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

  • 按钮的向下向上三角形

    三角形完全是通过CSS代码来实现的

    向下三角形：在<button>标签中添加一个<span>标签元素，并且命名为.caret

    下拉菜单会向上弹起，在.btn-group类上追加dropup类名

  • 示例

<div class="btn-wrap">

    <!-- btn-group分组容器 -->

    <!-- btn-group-lg按钮组大小，不有btn-group-sm与btn-group-xs -->

    <!-- btn-group-vertical垂直分组 -->

    <!-- btn-group-justified等分按钮，自适应，尽量使用<a>标签 -->

    <div class="btn-group btn-group-lg btn-group-vertical btn-group-justified">

        <a class="btn btn-default" href="#">首页</a>

        <a class="btn btn-default" href="#">产品展示</a>

        <a class="btn btn-default" href="#">案例分析</a>

        <!-- span中加类caret向下三角形 -->

        <!-- 在上面btn-group后加dropup，则为向上三角形 -->

        <a class="btn btn-default" href="#">联系我们<span class="caret"></span></a>

    </div>

</div>

导航

在Bootstrap框架将导航独立出来成为一个导航组件

  • 基础样式

    Bootstrap框架中制作导航条主要通过.nav样式。

    默认的.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类

  • 标签形tab导航，也称为选项卡导航

    通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名

    想让某一项为当前选中项，只需要在其<li>标签上添加类名class="active"”即可

    实现禁用状态，只需要在标签<li>上添加class="disabled"即可

  • 胶囊形(pills)导航

    实现方法和nav-tabs类似，同样的结构，只需要把类名nav-tabs换成nav-pills即可

  • 垂直堆叠的导航

    制作垂直堆叠导航只需要在nav-pills的基础上添加一个nav-stacked类名

    分隔线：在导航项之间添加<li class=”nav-divider”></li>

  • 自适应导航

    自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

    自适应导航和前面使用btn-group-justified制作的自适应按钮组是一样的。

    只不过在制作自适应导航时更换了另一个类名nav-justified。

  • 二级导航：导航加下拉菜单

    将li当作父容器，使用类名dropdown，同时在li中嵌套另一个列表ul

  • 面包屑式导航

    面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）

    使用方式就很简单，为ol加入breadcrumb类，不支持低版本IE

  • 示例

<!-- nav-pills导航(还有nav-tabs导航)，nav-stacked垂直堆叠，nav-justified自适应 -->

<ul class="nav nav-pills nav-stacked nav-justified">

    <!-- active选中当前项 -->

    <li class="active"><a href="##">首页</a></li>

    <li class="dropdown"><a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="##">CSS3</a></li>

            <li><a href="##">Sass</a></li>

            <li><a href="##">jQuery</a></li>

            <!-- nav-divider导航分隔线 -->

            <li class="nav-divider"></li>

            <!-- disabled禁用状态 -->

            <li class="disabled"><a href="##">Responsive</a></li>

        </ul></li>

    <li><a href="##">关于我们</a></li>

</ul>

<!-- breadcrumb面包屑式导航 -->

<ol class="breadcrumb">

    <li><a href="#">首页</a></li>

    <li><a href="#">我的书</a></li>

    <li class="active">《图解CSS3》</li>

</ol>

导航条、分页导航、标签、徽章

导航条

  • 导航条基础

    在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航）

    导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。

  • 基础导航条

    1 首先在制作导航的列表<ul class=”nav”>基础上添加类名navbar-nav

    2 在列表外部添加一个容器div，并且使用类名navbar和navbar-default

  • 为导航条添加标题、二级菜单及状态

    加入导航条标题：通过navbar-header和navbar-brand来实现，改良一下可以当作是logo

    导航条状态、二级菜单：与导航中的二级导航类似

  • 带表单的导航条

    在navbar容器中放置一个带有navbar-form类名的表单

    navbar-left让表单左浮动，更好实现对齐

    navbar-right样式，让元素在导航条靠右对齐

  • 导航条中的按钮、文本和链接

    1、导航条中的按钮navbar-btn

    2、导航条中的文本navbar-text

    3、导航条中的普通链接navbar-link

    但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

  • 固定导航条

    .navbar-fixed-top：导航条固定在浏览器窗口顶部

    .navbar-fixed-bottom：导航条固定在浏览器窗口底部

    页面主内容顶部和底部都被固定导航条给遮住了，解决方法: 存在bug及解决方法

    1 为body加css，padding-top: 70px;或padding-bottom: 70px;

    2 固定导航条都放在页面内容前面

.navbar-fixed-top ~ .content {

   padding-top: 70px;

}

.navbar-fixed-bottom ~ .content {

  padding-bottom: 70px;

}

  • 响应式导航条

    1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

    2、保证在窄屏时要显示的图标样式（固定写法）

    3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定

  • 响应式导航条示例

<div class="navbar navbar-default" role="navigation">

    <div class="navbar-header">

        <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->

        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

            <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>

        </button>

        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->

        <a href="##" class="navbar-brand">慕课网</a>

    </div>

    <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->

    <div class="collapse navbar-collapse navbar-responsive-collapse">

        <ul class="nav navbar-nav">

            <li class="active"><a href="##">网站首页</a></li>

            <li><a href="##">系列教程</a></li>

            <li><a href="##">名师介绍</a></li>

            <li><a href="##">成功案例</a></li>

            <li><a href="##">关于我们</a></li>

        </ul>

    </div>

</div>

  • 反色导航条

    只是将navbar-deafult类名换成navbar-inverse

  • 导航条示例

<!-- navbar导航条 -->

<!-- navbar-default默认样式导航条，还有navbar-inverse -->

<!-- navbar-fixed-top导航条固定到顶部，还有navbar-fixed-bottom，会遮掩页面内容，需进行其它设置 -->

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

    <!-- 导航条标题，但于导航条最前面，进行修改后，可当logo -->

    <div class="navbar-header">

        <a href="##" class="navbar-brand">慕课网</a>

    </div>

    <!-- navbar-nav导航条 -->

    <ul class="nav navbar-nav">

        <li class="active"><a href="##">网站首页</a></li>

        <!-- dropdown二级菜单 -->

        <li class="dropdown"><a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

            <ul class="dropdown-menu">

                <li><a href="##">CSS3</a></li>

                <li><a href="##">JavaScript</a></li>

                <li class="disabled"><a href="##">PHP</a></li>

            </ul></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

    </ul>

    <!-- navbar-form导航条的表单  -->

    <!-- navbar-left对齐方式，还有navbar-right -->

    <form action="##" class="navbar-form navbar-left" rol="search">

        <div class="form-group">

            <input type="text" class="form-control" placeholder="请输入关键词" />

        </div>

        <button type="submit" class="btn btn-default">搜索</button>

    </form>

</div>

分页导航

  • 带页码的分页导航

    Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination类

  • 大小设置

    pagination-lg让分页导航变大

    pagination-sm让分页导航变小

  • 翻页分页导航

    翻页分页导航和带页码的分页导航类似，为ul标签加入pager类

    previous：让“上一步”按钮居左

    next：让“下一步”按钮居右

  • 示例

<ul class="pagination pagination-lg">

    <li><a href="#">&laquo;第一页</a></li>

    <li><a href="#">11</a></li>

    <li><a href="#">12</a></li>

    <li class="active"><a href="#">13</a></li>

    <li><a href="#">14</a></li>

    <li><a href="#">15</a></li>

    <li class="disabled"><a href="#">最后一页&raquo;</a></li>

</ul>

标签

<span class="label label-default">默认标签</span>

<span class="label label-primary">主要标签</span>

<span class="label label-success">成功标签</span>

<span class="label label-info">信息标签</span>

<span class="label label-warning">警告标签</span>

<span class="label label-danger">错误标签</span>

徽章

如果你信息没有看，系统会告诉你有多少信息未读，微信、支付宝中常用伎俩

  • 使用方法

    可以像标签一样，使用span标签来制作，然后为他加入badge类

  • 示例

<!--nav-pills导航条勋章-->

<ul class="nav nav-pills">

    <li class="active"><a href="#">Home <span class="badge">42</span></a></li>

    <li><a href="#">Profile</a></li>

    <li><a href="#">Messages <span class="badge">3</span></a></li>

</ul>

<br />

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">

    <li class="active"><a href="#"> <span class="badge pull-right">42</span> Home

    </a></li>

    <li><a href="#">Profile</a></li>

    <li><a href="#"> <span class="badge pull-right">3</span> Messages

    </a></li>

</ul>

<br />

<!--按钮勋章-->

<button class="btn btn-primary" type="button">

    Messages <span class="badge">4</span>

</button>

其它内置组件

缩略图

  • 最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。

  • Bootstrap框架将这一部独立成一个模块组件。并通过thumbnail样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

  • 在仅有缩略图的基础上，添加了一个div名为caption的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等

  • 示例

<!-- col-xs-*自适应网格，col-md-*屏宽970px列宽~81px -->

<div class="col-xs-6 col-md-3">

    <!-- thumbnail缩略图 -->

    <a href="#" class="thumbnail">

        <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">

    </a>

    <!-- caption放置其他内容 -->

    <div class="caption">

        <h3>Bootstrap框架系列教程</h3>

        <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>

        <p>

            <a href="##" class="btn btn-primary">开始学习</a>

            <a href="##" class="btn btn-info">正在学习</a>

        </p>

    </div>

</div>

警示框

  • 默认警示框

    1、成功警示框：<div class="alert alert-success" role="alert">

    2、信息警示框：<div class="alert alert-info" role="alert">

    3、警告警示框：<div class="alert alert-warning" role="alert">

    4、错误警示框：<div class="alert alert-danger" role="alert">

  • 可关闭的警示框

    1、需要在基本警示框alert的基础上添加alert-dismissable样式。

    2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

    3、要确保关闭按钮元素上设置了自定义属性：data-dismiss="alert"（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

  • 警示框的链接

    在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。

    给警示框加的链接添加一个名为alert-link的类名

  • 示例

<!-- alert alert-success成功警示框 -->

<!-- alert-dismissable可关闭的警示框 -->

<div class="alert alert-success alert-dismissable" role="alert">

    <!-- close实现警示框关闭按钮的样式 -->

    <!-- data-dismiss="alert"要确保关闭按钮元素上设置了自定义属性 -->

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    恭喜您操作成功！

    <!-- a标签 警示框的链接 -->

    <a href="#" class="alert-link">this important alert message</a>

</div>

进度条

  • 基本样式

    两个容器，外容器使用progress样式，子容器使用progress-bar样式。

    其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度

    结构优化：方便残障人员浏览

  • 彩色进度条，只需在基础的进度上增加对应的类名

    rogress-bar-info：表示信息进度条，进度条颜色为蓝色

    progress-bar-success：表示成功进度条，进度条颜色为绿色

    progress-bar-warning：表示警告进度条，进度条颜色为黄色

    progress-bar-danger：表示错误进度条，进度条颜色为红色

  • 条纹进度条

    只需要在进度条的容器progress基础上增加类名progress-striped

    使用CSS3实现

  • 动态条纹进度条

    进度条progress progress-striped两个类的基础上再加入active类名

    主要通过CSS3的animation来完成

    要让条纹进度条动起来，就需要让progress-striped和active同时运用，不然条纹进度条是不具备动效效果。

  • 层叠进度条

    可以将不同状态的进度条放置在一起，按水平方式排列。

    层叠进度条宽度之和不能大于100%

  • 带Label的进度条

    只需要在进度条中添加你需要的值

  • 示例

<h5>正常层叠进度条（进度之和不能大于100%）</h5>

<!-- progress外容器 -->

<!-- progress-striped条纹进度条 -->

<!-- active动态条纹 -->

<div class="progress progress-striped active">

    <!-- progress-bar子容器 -->

    <!-- progress-bar-warning黄色警告进度条 -->

    <!-- role、aria-valuenow、aria-valuemin、aria-valuemax方便残障人员浏览 -->

    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0"

         aria-valuemax="100" style="width:90%">90%

    </div>

</div>

<!-- 层叠进度条 -->

<div class="progress">

    <!-- 带Label的进度条  -->

    <div class="progress-bar progress-bar-success" style="width:20%">20%</div>

    <!-- progress-bar-striped与active也要放于此处 -->

    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:20%">20%</div>

    <div class="progress-bar progress-bar-warning" style="width:30%">30%</div>

    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">危险</div>

</div>

媒体对象

左边居左（或居右），内容居右（或居左）排列

  • 默认媒体对象，一组媒体对象常常包括以下几个部分：

    1 媒体对像的容器：常使用media类名表示，用来容纳媒体对象的所有内容

    2 媒体对像的对象：常使用media-object表示，就是媒体对象中的对象，常常是图片

    3 媒体对象的主体：常使用media-body表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

    4 媒体对象的标题：常使用media-heading表示，就是用来描述对象的一个标题，此部分可选

    除了上面四个部分之外，在Bootstrap框架中还常常使用pull-left或者pull-right来控制媒体对象中的对象浮动方式。

  • 媒体对象的嵌套

    在media-body中添加嵌套

  • 媒体对象列表

    在ul上添加类名media-list，而在li上使用media

  • 示例

<!-- media媒体对像容器 -->

<div class="media">

    <!-- pull-left媒体对象浮动方式，还有pull-right -->

    <a class="pull-left" href="#">

        <!-- media-object媒体对像的对象 -->

        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">

    </a>

    <!-- media-body媒体对象的主体 -->

    <div class="media-body">

        <!-- media-heading媒体对象的标题 -->

        <h4 class="media-heading">系列：十天精通CSS3</h4>

        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

    </div>

</div>

<!-- media-list媒体对象列表 -->

<ul class="media-list">

    <li class="media">

        <a class="pull-left" href="#">

            <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">

        </a>

        <div class="media-body ">

            <h4 class="media-heading">系列：十天精通CSS3</h4>

            <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

        </div>

    </li>

    <li class="media">…</li>

    <li class="media">…</li>

</ul>

列表组

可以用来制作列表清单、垂直导航等效果

  • 基础列表组

    list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

    list-group-item：列表项，常用的是li元素，当然也可以是div元素

  • 带徽章的列表组

    其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。

    只需要在list-group-item中添加徽章组件badge

  • 带链接的列表组，列表项的任何区域都具备可点击

    将ul.list-group使用div.list-group来替换

    而li.list-group-item直接用a.list-group-item来替换

  • 自定义列表组

    list-group-item-heading：用来定义列表项头部样式

    list-group-item-text：用来定义列表项主要内容

  • 列表项的状态设置

    active：表示当前状态

    disabled：表示禁用状态

  • 多彩列表组

    在list-group-item基础上增加对应的类名

    list-group-item-success：成功，背景色绿色

    list-group-item-info：信息，背景色蓝色

    list-group-item-warning：警告，背景色为黄色

    list-group-item-danger：错误，背景色为红色

  • 示例

<h5>带徽章的列表组</h5>

<!-- list-group列表组容器，常用的是ul元素，当然也可以是ol或者div元素 -->

<ul class="list-group">

    <!-- list-group-item列表项，常用的是li元素，当然也可以是div元素 -->

    <li class="list-group-item">

        <!-- badge徽章，实现是将之右浮，所以在内容左或右都没关系 -->

        <a href="##">玩转Bootstrap</a><span class="badge">23</span>

    </li>

    <li class="list-group-item">

        <a href="##">玩转Bootstrap</a><span class="badge">23</span>

    </li>

</ul>

<h5>带链接，在任何区域可点击</h5>

<div class="list-group">

    <a href="##" class="list-group-item">

        <!-- list-group-item-heading列表项头部样式 -->

        <h4 class="list-group-item-heading">Bootstrap<span class="badge">23</span></h4>

        <!-- list-group-item-text列表项主要内容 -->

        <p class="list-group-item-text">玩转Bootstrap玩转Bootstrap玩转Bootstrap</p>

    </a>

</div>

<h5>列表项的状态</h5>

<div class="list-group">

    <!-- active当前状态 -->

    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>

    <!-- list-group-item-success成功，背景色绿色，还有list-group-item-info，list-group-item-warning，list-group-item-danger -->

    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>

    <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>

    <!-- disabled禁用状态 -->

    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>

</div>

面板

  • 基础面板

    一个div容器运用了.panel样式，产生一个具有边框的文本显示块

    panel-default控制主题颜色

    div.panel-body放置面板主体内容

  • 带有头和尾的面板

    panel-heading：用来设置面板头部样式

    panel-footer：用来设置面板尾部样式

  • 彩色面板

    panel-primary：重点蓝

    panel-success：成功绿

    panel-info:信息蓝

    panel-warning：警告黄

    panel-danger：危险红

  • 面板中嵌套表格

    在panel-body放置需要的内容，可能是图片、表格或者列表等

    把table提取到panel-body外面，效果会比较好

  • 面板中嵌套列表组

    与嵌套表格类似

  • 示例

<!-- panel产生一个具有边框的文本显示块 -->

<!-- panel-primary彩色面板，还有panel-default、panel-success、panel-info、panel-warning、panel-danger -->

<div class="panel panel-primary">

    <!-- panel-heading头部样式 -->

    <div class="panel-heading">玩转Bootstrap</div>

    <!-- panel-body面板主体内容 -->

    <div class="panel-body">玩转Bootstrap玩转Bootstrap玩转Bootstrap</div>

    <table class="table table-bordered">

        <thead>

        <tr><th>test</th><th>test</th></tr>

        </thead>

        <tbody>

        <tr><td>test2</td><td>test2</td></tr>

        </tbody>

    </table>

    <!-- panel-footer尾部样式 -->

    <div class="panel-footer">作者：大漠</div>

</div>

《玩转Bootstrap（基础）》笔记的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  6. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  7. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  10. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

随机推荐

  1. linux command----vi

    vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器.Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能. ...

  2. iOS项目架构 小谈

    层级结构,自底向上 持久层(File,Realm,SQLite)<==>网络层(相信每个公司都有自己的网络层吧)==>业务层(ViewModel)==>展示层(View,VC) ...

  3. ajax遇到的问题

    今天做了个小小的实验,用ajax XMLHttpRequest对象读取服务器上的txt文件里的内容,展示出来 直接把html文件放在桌面用浏览器打开,没有反应,部分代码如下: function oHt ...

  4. Light OJ 1006 - Hex-a-bonacci

    题目链接:http://acm.hust.edu.cn/vjudge/contest/121396#problem/G http://lightoj.com/volume_showproblem.ph ...

  5. emacs search, 讲的很清楚。

    默认情况下,Emacs采用了一种很待殊的”增量搜索”的功能,虽然它与我们常用的搜索方法在操作习惯上有很大的不同,但习惯后确实是十分的方便. 要让Emacs开始执行搜索,可以按C-s或C-r,前者是从光 ...

  6. java打jar包

    一.打包jar文件 1      如果是class文件     jar cvf myjar.jar Foo.class Bar.class 如果是包     jar cvf myjar.jar pac ...

  7. C#入门经典（3-窗体应用程序-第二章要点）

    新建一个窗体用用程序,拖一个按钮,加事件和Text属性.打开Form1Designer.cs.

  8. 【树状数组】 poj 2352

    题意:给出n个平面二维坐标,对于每个坐标,如果这个坐标跟(0,0)形成的矩形内包含的点数为 k (包含边界,但不包含坐标本身),那么这个坐标就是 level k.输出level 0 - n-1的点数分 ...

  9. NSDate，NSCalendar

    NSLog(@"%@",[NSDate date]); 打印结果: 2015-06-30 08:42:14 +0000 把它转换成2015年6月30日 8时42分14秒 怎么转? ...

  10. HDOJ 1319 Prime Cuts<数论>

    学会了不难.通过这道题学习了两点: 1:筛选法求素数. 2:在写比较长的程序的时候,给每个功能部分加上注释,思路会更清晰. 题意: 1.题目中所说的素数并不是真正的素数,包括1: 2.需要读懂题意,对 ...