转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6692706.html
一:准备
下载:http://getbootstrap.com/
导入: jquery.js、bootstrap.min.js 、 bootstrap.min.css
二:基本元素
1:网格
<table> | 为表格添加基础样式。 |
<thead> | 表格标题行的容器元素(<tr>),用来标识表格列。 |
<tbody> | 表格主体中的表格行的容器元素(<tr>)。 |
<tr> | 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。 |
<td> | 默认的表格单元格。 |
<th> | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。 |
1)普通网格
<table class="table"> <thead> <tr> <th>名称</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> </tr> <tr> <td>Mumbai</td> </tr> </tbody> </table>
2)条纹网格
<table class="table table-striped">
3)带表框表格
<table class="table table-bordered">
4)悬停表格
<table class="table table-hover">
5)响应式表格
<div class="table-responsive">
2:表单
1)基本表单
- 父 <form> 元素添加 role="form"。
- form中一个<div> 一个小分块,添加class =form-group 属性获得最近行距
2)内联表单
元素是内联的,向左对齐,标签并排。向 <form> 标签添加 class =form-inline属性即可。
3)水平表单
- 向父 <form> 元素添加 class=form-horizontal。
- form中一个<div> 一个小分块,添加class =form-group 属性获得最近行距
表单控件:
1)输入框:input 类型包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
2)文本框:进行多行输入的时,则可以使用文本框 textarea。
3)复选框(Checkbox)和单选框(Radio):使用 class=checkbox-inline 或 class=radio-inline,控制它们显示在同一行上.
4)选择列表:
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
5)纯文本:
<p class="form-control-static">纯文本</p>
6)帮助文本:
<span class="help-block">帮助文本块</span>
3:按钮
<!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button>
4:图片标签<img>
通过指定class属性来进行图片的多种形式显示:
img-rounded | 为图片添加圆角 (IE8 不支持) |
img-circle | 将图片变为圆形 (IE8 不支持) |
img-thumbnail | 缩略图功能 |
img-responsive | 图片响应式 (将很好地扩展到父元素) |
三:布局组件
1:字体图标
如需使用图标,只需要简单地使用下面的代码即可。
<span class="glyphicon glyphicon-图标名"></span>
具体图标样式见:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
2:下拉菜单
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">菜单按钮</button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">//下拉菜单项 <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">3</a> </li> </ul> </div>
3:按钮组
<div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div>
4:导航菜单
<ul class="nav nav-样式名"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul>
主要有:
.nav nav-tabs | 标签页 |
.nav nav-pills | 胶囊式标签页 |
.nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆叠排列的 |
.nav-justified | 两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。 |
5:面包屑导航栏
<ol class="breadcrumb"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="active">3</li> </ol>
6:分页
.pager | 一个简单的分页链接,链接居中对齐。 |
.previous | .pager 中上一页的按钮样式,左对齐 |
.next | .pager 中下一页的按钮样式,右对齐 |
.disabled | 禁用链接 |
.pagination | 分页链接 |
.pagination-lg | 更大尺寸的分页链接 |
.pagination-sm | 更小尺寸的分页链接 |
.disabled | 禁用链接 |
.active | 当前访问页面链接样式 |
7:各种样式标签
.label label-default | 默认的灰色标签 |
.label label-primary | "primary" 类型的蓝色标签 |
.label label-success | "success" 类型的绿色标签 |
.label label-info | "info" 类型的浅蓝色标签 |
.label label-warning | "warning" 类型的黄色标签 |
.label label-danger | "danger" 类型的红色标签 |
8:徽章图标
<span class="badge">徽章文字</span>
9:标题
<div class="page-header">
10:警告信息
<div class="alert alert-success">成功!</div> <div class="alert alert-info">信息!</div> <div class="alert alert-warning">警告!</div> <div class="alert alert-danger">错误!</div>
11:进度条:通过style控制进度显示
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=" 40%;"> </div> </div>
12:多媒体
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="多媒体链接">//插入多媒体:视频、音频、图片 </a> <div class="media-body"> 文字介绍信息 </div> </div>
13:列表组
<ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> </ul>
14:面板
<div class="panel panel-default"> <div class="panel-heading"> 标题 </div> <div class="panel-body"> 面板内容 </div> </div>
15:轮播
<div id="myCarousel" class="carousel slide"> <!-- 轮播导航栏 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播内容--> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播翻页:向前、向后--> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div>