1.bootstrap简介
Bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本
bootstrap特点：
(1)响应式框架：一个网站可以应用于多个终端
(2)栅格系统：把视口平均分为12列（行下有列，内容放在列中）
(3)CSS样式的应用：引入列名给标签来获取样式
环境搭建（两种方法）：
1.外联引入
先将下载的三个css、jquery、js文件放入项目文件中，然后通过link和script标签分别引入文件
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="assets/jquery-1.11.0.js"></script>
<script type="text/javascript" src="./assets/bootstrap/js/bootstrap.min.js"></script>
注意：要按照顺序引入文件，jquery文件必须在bootstrap.js文件之前。同时在引入自己写的js文件时必须放在这个js文件之后哦~~要不然会报错的
2.CDN方法
通俗来讲就是通过网络连接的方法进行连接，因此在使用时必须要连网
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
2.bootstrap使用
1. 布局容器
container 固定宽度，支持响应式布局
container-fluid 100%宽度，占据全部视口的容器
2. 栅格系统
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
功能：自动分配视口的布局大小，根据视口大小的变化改变页面的整体布局
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
网格选项：
| 超小设备手机（<768px） | 小型设备平板电脑（>=768px） | 中型设备台式电脑（>=992px） | 大型设备台式电脑（>-1200px） | |
|---|---|---|---|---|
| 最大容器宽度 | None（auto） | 750px | 970px | 1170px |
| 最大列宽 | auto | 60px | 78px | 95px |
| class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 每列间隙宽度 | 左右各15px（共30px） | 左右各15px（共30px） | 左右各15px（共30px） | 左右各15px（共30px） |
栅格的大致框架：
加入规定的class的同时也可根据自己的需求写入其他的css样式，此时需要定义另外一个class引入样式即可
<style type="text/css">
.a {
border: 1px solid #000000;
height: 30px;
}
.b {
border: 1px solid #C7254E;
height: 25px;
}
</style>
<!-- 栅格 -->
<div class="container">
<div class="row">
<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
</div>
<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
</div>
</div>
(1)偏移列
.col-md-offset-*
这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
(2)嵌套列
在一个已有的 .col-md-* 列内添加一组 .col-md-* 列
(3)列排序
.col-md-push-* / .col-md-pull-*
以一种顺序编写列，然后以另一种顺序显示列
(4)响应式工具
显示：visible-md-
隐藏：hidden-md-
3. CSS样式
1. 排版
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">禁止换行</p>
<p class="text-muted">文本灰色</p>
<p class="text-primary">文本蓝色</p>
<p class="text-success">文本绿色</p>
<p class="text-info">文本蓝色</p>
<p class="text-warning">本文本橘色</p>
<p class="text-danger">文本红色</p>
2. 表格
| 表格样式类型 | class名称 | 样式解释 |
|---|---|---|
| 条纹表格 | table-striped | 条纹颜色 |
| 边框表格 | table-bordered | 每个元素都有边框，且边框时圆角的 |
| 悬停表格 | table-hover | 鼠标悬停时此行会出现浅灰色背景 |
| 精简表格 | table-condensed | 行内边距减半，表更加紧凑 |
| 响应式表格 | table-responsive | 可随视口自适应大小 |
<table class="table table-hover">
<tr class="active">
<th>名称</th>
<th>官网</th>
<th>性质</th>
</tr>
<tr class="warning">
<td>C语言中文网</td>
<td>http://c.biancheng.net/</td>
<td>教育</td>
</tr>
<tr class="success">
<td>百度</td>
<td>http://www.baidu.com/</td>
<td>搜索</td>
</tr>
<tr class="info">
<td>当当</td>
<td>http://www.dangdang.com/</td>
<td>图书</td>
</tr>
<tr class="danger">
<td>当当</td>
<td>http://www.dangdang.com/</td>
<td>图书</td>
</tr>
</table>
3. 按钮组
通过按钮组容器 .btn-group 把一组按钮放在同一行里。
按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角
<div class="container">
<!-- 按钮工具栏 -->
<div class="btn-toolbar">
<div class="btn-group-vertical"><!-- vertical(垂直) -->
<button class="btn btn-default">1</button>
<button class="btn btn-danger">2</button>
<button class="btn btn-success">3</button>
<button class="btn btn-default">4</button>
<div class="btn-group"> <!-- 嵌套-下拉菜单 -->
<button class="btn btn-default dropdown-toggle" data-toggle='dropdown'>更多<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</div>
</div>
4. 表单组
-
输入框组
<!-- 输入框组 -->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" placeholder="UserName" class="form-control"/>
</div>
-
输入框组--后按钮
<!-- 输入框组-后按钮 -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Username"/>
<span class="input-group-btn">
<input type="submit" value="开始搜索" class="btn btn-danger"/>
</span>
</div>
-
输入框组--后下拉菜单
<!-- 输入框组-后下拉栏 -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Username"/>
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle='dropdown'>
更多<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</span>
</div>
-
表单组
<form action="#" method="post" class="form-inline">
<div class="form-group">
<label for="email">Email Address</label>
<input type="text" name="" id="email" class="form-control" placeholder="请输入电子邮箱"/>
</div>
<br>
<div class="form-group">
<label for="pwd">PassWord</label>
<input type="text" name="" id="pwd" class="form-control" placeholder="请输入密码">
</div>
<br>
<div class="form-group">
<label for="fl">Select File</label>
<input type="file"/>
</div>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset" />
<!-- 相当于
<button type="submit">submit</button>
<button type="button" id="reset">reset</button> -->
</form>
<script type="text/javascript">
$(function(){
// 给reset的button绑重置事件
$('reset').bind('click',function(){
$('#email').val('')
$('#pwd').val('')
$('#fl').val('')
})
})
</script>
5. 导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
注： .nav-* 类依赖 .nav 基类
<!-- ul导航 -->
<ul class="nav nav-pills">
<li class="active"><a href="#">历史</a></li>
<!-- disabled禁用，鼠标悬停时没有样式变化，鼠标箭头变为禁止的标志 -->
<li class="disabled"><a href="#">文学</a></li>
<li><a href="#">物理</a></li>
<li><a href="#">天文</a></li>
<li>
<a href="#" data-toggle='dropdown'>其他
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>a</li>
<li>c</li>
<li>b</li>
</ul>
</li>
</ul>
-
路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
给< ol>或< ul>添加 .breakcrumb 可以实现“面包屑”效果。
<!-- ul/ol路径导航 -->
<ul class="breadcrumb">
<li><a href="#">游戏</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">娱乐</a></li>
</ul>
-
分页
默认分页
将分页类 .pagination 添加到< ul>标记上，可以实现分页效果。
添加 .disabled 类可以实现禁用状态。
添加 .active 类可以实现激活状态。
给< ul>添加 .pagination-lg 或 .pagination-sm 可以控制分页大小。
<!-- ul分页控件 pagination -->
<ul class="pagination">
<li class="disabled">
<span> « </span>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
翻页分页
给< ul>添加 .pager 类，可以实现“上一页”和“下一页”效果。
给< li>添加 .previous 和 .next 可以实现两端对齐。
<!-- 上下页 -->
<nav>
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
</nav>
-
导航条--品牌图标
将导航条内放置品牌标志的地方替换为 < img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
<!-- nav导航条（navbar） -->
<nav class="navbar navbar-default">
<!-- 导航条头部，可添加logo图片等 -->
<div class="navbar-header">
<img src="img/1.jpg" alt="" class="navbar-brand">
</div>
<!-- 加入按钮 -->
<!-- <button type="submit" class="btn navbar-btn">submit</button> -->
<!-- 加入文本 -->
<!-- <p class="navbar-text">是的</p> -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">a</a></li>
<li><a href="">b</a></li>
<li><a href="">c</a></li>
</ul>
</div>
</nav>
-
导航条--内嵌表单
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
使用 .navbar-left 或 .navbar-right 可以实现表单左对齐或右对齐。
<!-- nav导航条内嵌表单 -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<img src="img/1.jpg" alt="" class="navbar-brand">
</div>
<!-- 内嵌表单(navbar-form) -->
<form class="navbar-form navbar-left"> <!-- navbar-left 靠左对齐 -->
<div class="form-group">
<input type="text" value="" placeholder="please" class="form-control"/>
</div>
<button type="submit" class="btn btn-danger">提交</button>
</form>
</nav>
-
徽章
给链接、导航等元素嵌套 < span class=“badge”> 元素，可以很醒目的展示新的或未读的信息条目。
<!-- 徽章badge -->
<!-- 链接式 -->
<a href="javascript:(0)">新闻标题
<span class="badge">123</span>
</a>
<!-- 按钮式 -->
<button type="button" class="btn btn-primary">未读消息
<span class="badge">45</span>
</button>
-
缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。使用 .thumbnail 可以实现缩略图效果。
<!-- 缩略图 -->
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
<div class="caption">
<h4>bootstrap</h4>
<p>课程描述</p>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
<div class="caption">
<h4>bootstrap</h4>
<p>课程描述</p>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
<div class="caption">
<h4>bootstrap</h4>
<p>课程描述</p>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
<div class="caption">
<h4>bootstrap</h4>
<p>课程描述</p>
</div>
</div>
</div>
-
警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。
用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。
<!-- 警示框 -->
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong><p>woring...</p>
</div>
2440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
