您的位置：首页 > Web前端 > BootStrap

《玩转Bootstrap（基础）》笔记

2016-07-20 23:09 447 查看

基本的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

才具有水平定义列表效果

代码风格，管使用哪种代码风格，在代码中碰到小于号

要使用硬编码

来替代，大于号

使用

来替代。

<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>

<!-- 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

这样的结构，在ul标签上加入

pagination

类

大小设置

pagination-lg

让分页导航变大

pagination-sm

让分页导航变小

翻页分页导航

翻页分页导航和带页码的分页导航类似，为

ul

标签加入

pager

类

previous

：让“上一步”按钮居左

next

：让“下一步”按钮居右

示例

<ul class="pagination pagination-lg">
<li><a href="#">«第一页</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="#">最后一页»</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">×</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航