**
媒体查询
**
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
下面我们来通过一个案例来讲解一下什么是媒体查询：
<style>
/* 当浏览器的宽度在 200到 699px，采用下面这个样式*/
@media screen and (max-width: 699px) and (min-width: 200px) {
.one{
background-color: red;
width: 200px;
height: 100px;
}
}
/* 当浏览器的宽度在 699到 1800px，采用下面这个样式*/
@media screen and (max-width: 1800px) and (min-width: 699px) {
.one{
background-color: black;
width: 1000px;
height: 500px;
}
}
</style>
</head>
<div class="one"></div>
</body>
**
网格系统
**
什么是 Bootstrap 网格系统（Grid System）？
Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格
下面我们通过几个案例来学习下bootstrap的网格系统
案例1：
<title>网格</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
class="container"
<div class="row">
<div class="col-xs-6" style="border: solid 1px red">手机</div>
<div class="col-xs-6" style="border: solid 1px red">手机</div>
</div>
案例2：
<title>网格</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<div class="row">
<div class="col-sm-6" style="border: solid 1px red">手机</div>
<div class="col-sm-6" style="border: solid 1px red">手机</div>
</div>
尝试缩小一下浏览器的宽度，看看2个案例有什么不一样
网格选项
超小型设备(手机) 小型设备平板电脑(ipad) 中型设备(台式电脑) 大型设备(台式电脑)
Class前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
间隙宽度 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px） 30px
（一个列的每边分别 15px）
基本的网格结构
下面是 Bootstrap 网格的基本结构：
< div class=“container”>
< div class=“row”>
< div class=“col--”></ div>
< div class=“col--”></ div>
</ div>
< div class=“row”>…</ div>
</ div>
Bootstrap 表格
样式 描述
.table 为任意
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 内的任一行启用鼠标悬停状态
.table-striped 在 内添加斑马线形式的条纹
案例：
表格
| 序号 | 姓名 |
|---|---|
| 1 | 张三 |
| 2 | 李四 |
| 3 | 王五 |
| 4 | 王刘 |
<link rel="stylesheet" href="../css/bootstrap.min.css">
tr,td,th样式布局
| 产品 | 付款日期 | 状态 |
|---|---|---|
| 产品1 | 23/11/2013 | 待发货 |
| 产品2 | 10/11/2013 | 发货中 |
| 产品3 | 20/10/2013 | 待确认 |
| 产品4 | 20/10/2013 | 已退货 |
案例：
<form role="form" >
<div class="form-group">
<label >姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label>性别</label>
<select class="form-control" id="s">
<option>男</option>
<option>女</option>
</select>
</div>
<button type="submit" class="btn btn-info">提交</button>
</form>
水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
1向父 元素添加 class .form-horizontal。
2把标签和控件放在一个带有 class .form-group 的
3向标签添加 class .control-label。
4 需要根据网格布局分配列样式col-*
案例：
<form role="form" class="form-horizontal">
<div class="form-group">
<label class=" col-sm-2 control-label">姓名</label>
<div class=" col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">学历</label>
<div class=" col-sm-10">
<select class="form-control" id="s">
<option>本科</option>
<option>专科</option>
</select>
</div>
</div>
</form>
表单控件大小
您可以分别使用 class .col-- 来设置表单的宽度。下面的实例演示了这点：
案例：
<div class="row">
<div class="col-md-3" style="text-align: right;">
<label>姓名</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
<div class="col-md-3">
<span style="color: red;">格式输入不正确</span>
</div>
</div>
Bootstrap按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式
案例：
< !-- 标准的按钮 -->
< button type=“button” class=“btn btn-default”>默认按钮
< !-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
< button type=“button” class=“btn btn-primary”>原始按钮
< !-- 表示一个成功的或积极的动作 -->
< button type=“button” class=“btn btn-success”>成功按钮
< !-- 信息警告消息的上下文按钮 -->
< button type=“button” class=“btn btn-info”>信息按钮
< !-- 表示应谨慎采取的动作 -->
< button type=“button” class=“btn btn-warning”>警告按钮
< !-- 表示一个危险的或潜在的负面动作 -->
< button type=“button” class=“btn btn-danger”>危险按钮
< !-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
< button type=“button” class=“btn btn-link”>链接按钮
A标签和input标签也可以采用按钮样式class .btn：
例如：
< a class=“btn btn-default” href="#" role=“button”>链接
< input class=“btn btn-default” type=“submit” value=“提交”>
如果你想更改按钮的大小，可以采用btn-lg,btn-sm ,btn-xs来设置
例如：
< button type=“button” class=“btn btn-default btn-lg”>默认按钮</ button>
如果你想把按钮宽度和当前浏览器宽度一样，可以采用btn-block样式
例如：
< button type=“button” class=“btn btn-primary btn-block”>适应屏幕宽度的按钮>
在 div 中直接使用 .btn-group 可以创建按钮组：
例如：
< div class=“btn-group”>
< button type=“button” class=“btn btn-primary”>新增</ button>
< button type=“button” class=“btn btn-primary”>删除</ button>
< button type=“button” class=“btn btn-primary”>修改</ button>
</ div>
**
Bootstrap 图片
**
Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：圆角边框。
.img-circle：让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框
例如：
< img src="…" class=“img-rounded”>
< img src="…" class=“img-circle”>
< img src="…" class=“img-thumbnail”>
**
Bootstrap 字体图标
**
字体图标是在 Web 项目中使用的图标字体。如图所示
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
用法
如需使用图标，只需要简单地使用下面的代码即可。
< span class=“glyphicon glyphicon-search”></ span>
例如：
< button type=“button” class=“btn btn-primary”>
< span class="glyphicon glyphicon- search "></ span> 查询
</ button>
**
定制字体图标尺寸
**
设置font-size大小，您可以让图标看起来更大或更小。
例如：
< button type=“button” class="btn btn-primary " style=“font-size: 60px”>
< span class=“glyphicon glyphicon-search”></ span> 查询
</ button>
定制字体颜色
设置color属性，可以更改图标的颜色
< button type=“button” class="btn btn-primary " style=“color: red;”>
< span class=“glyphicon glyphicon-search”></ span> 查询
</ button>
**
定制文本阴影
**
< button type=“button” class="btn btn-primary " style=“text-shadow: black 5px 3px 3px;”>
< span class=“glyphicon glyphicon-search”></ span> 查询
</ button>
在线定制字体图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
字体图标列表
http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
**
Bootstrap 下拉菜单
**
如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
**
向上下拉菜单
**
.dropup 类用于指定一个向上的下拉菜单。
< h2>向上下拉菜单
< p>.dropup 类用于指定一个向上的下拉菜单。
< div class=“dropup”>
< button type=“button” class=“btn dropdown-toggle” id=“dropdownMenu1”
data-toggle=“dropdown”>
设置
< span class=“caret”></ span>
</ button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li >
<a href="#">修改密码</a>
</li>
<li>
<a href="#">个人信息</a>
</li>
</ul>
下拉菜单的禁用项
在li元素中设置.diabled样式来设置禁用该功能：
例如：
< div class=“dropdown”>
< button type=“button” class=“btn dropdown-toggle” id=“dropdownMenu1”
data-toggle=“dropdown”>
设置
< span class=“caret”>
</ button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="disabled">
<a href="#">修改密码</a>
</li>
<li>
<a href="#">个人信息</a>
</li>
</ul>
设置下拉菜单的分割线
.divider 类用于设置下拉菜单的分割线。在li元素中引入该样式即可
例如：
< div class=“dropdown”>
< button type=“button” class=“btn dropdown-toggle” id=“dropdownMenu1”
data-toggle=“dropdown”>
设置
< span class=“caret”>
</ button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li >
<a href="#">修改密码</a>
</li>
<li class="divider"></li>
<li>
<a href="#">个人信息</a>
</li>
<li>
<a href="#">退出系统</a>
</li>
</ul>
分割线的目的是为了归类，当下来菜单比较多的情况下，加个分割线给用户体验感觉比较好，像我们用的工具hbuilder,eclipse都采用过这种方式
滑动打开下拉菜单
Bootstarp下拉菜单是默认鼠标点击事件触发，如果要滑动打开，需要自己编写js来实现
例如：
< div class=“dropdown”>
< button type=“button” class=“btn dropdown-toggle” id=“dropdownMenu1”
data-toggle=“dropdown”>
设置
< span class=“caret”>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li >
<a href="#">修改密码</a>
</li>
<li class="divider"></li>
<li>
<a href="#">个人信息</a>
</li>
<li>
<a href="#">退出系统</a>
</li>
</ul>
**
Bootstrap 面板
**
面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向
如下面的实例所示：
< div class=“panel panel-primary”>
< div class=“panel-heading”>
< h3 class=“panel-title”>面板标题
</ div>
< div class=“panel-body”>
这是一个基本的面板
</ div>
</ div>
可以通过panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置面板颜色
**
面板适用场景
**
面板的通常用于美化表单和表格布局，网站首页的新闻布局
表格布局例如：
< div class=“panel panel-primary”>
< div class=“panel-heading”>产品表
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
表单布局
**
< div class=“panel panel-primary” style=“width: 40%;position: absolute;left: 30%;top: 30%;”>
< div class=“panel-heading”>用户登录
< br>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class=" col-sm-3 control-label">用户名</label>
<div class=" col-sm-5">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label class=" col-sm-3 control-label">密码</label>
<div class=" col-sm-5">
<input type="text" class="form-control" id="name" placeholder="请输入密码">
</div>
</div>
<div style="text-align: center;">
<button type="button" class="btn btn-primary">登录</button>
</div>
<br>
</form>
**
Bootstrap 模态框
**
模态框（Modal）是覆盖在父窗体上的子窗体。
用法
打开模态框有两种用法，先看第一种
第一种：
1控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#one" ，one是你要打开子窗体的id
2 创建子窗体div ，引入样式modal fade ，并设置id值，在子窗体中设置两个div,并分别引入样式modal-dialog和modal-content
例如：
< button class=“btn btn-primary” data-toggle=“modal” data-target="#one">
打开模态框
< div class=“modal fade” id=“one” >
< div class=“modal-dialog”>
< div class=“modal-content” style=“height: 300px;”>
模态框
第二种：通过js来控制
1控制器元素（比如按钮或者链接）无需设置data属性，只需定义一个鼠标点击事件，指向一个js函数，函数体写 $("#one").modal(“show”)，one是子窗体的id
2 子窗体创建和上面一样，这里不说了
例如：
< button class=“btn btn-primary” οnclick=“openW()”>
打开模态框
</ button>
< !-- 模态框（Modal） -->
< div class=“modal fade” id=“one” >
< div class=“modal-dialog”>
< div class=“modal-content” style=“height: 300px;”>
模态框
</ div>
</ div>
</ div>
</ body>
< script>
function openW(){
$("#one").modal(“show”)
}
**
子窗体完整写法
**
上面实例子窗体是一个简单的写法，还有更完善的写法。就像表格一样，不写tbody和thead我们的表格一样可以显示。子窗体也有头部内容，主体内容，底部内容的写法。写法是在class= modal-content 的div中了，加了三个div,分别引入了modal-header，modal-body，modal-footer 三个样式
例如：
< button class=“btn btn-primary” data-toggle=“modal” data-target="#one">
模态框
</ button>
< div class=“modal fade” id=“one” >
< div class=“modal-dialog”>
< div class=“modal-content”>
<!--模态框头部-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >×</button>
</div>
<!--模态框头部-->
<!--模态框主体内容-->
<div class="modal-body text-center">
主体内容
</div>
<!--模态框主体内容-->
<!--模态框底部内容-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
</div>
<!--模态框底部内容-->
</div>
</div>
在这里，如果要关闭模态框，可以在控制元素加上data-dismiss=“modal"属性 或者
定义一个鼠标点击事件，写下这个代码关闭 $(”#one").modal(“hide”),这里就不举例，自己尝试下
**
Bootstrap 折叠插件
**
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
用法
1 创建一个控制元素(按钮或者a标签)，在元素上设置属性data-toggle=“collapse”
data-target="#demo" demo是你要折叠内容元素的id
2 创建折叠内容元素div，设置id和引入样式class=“collapse in”
例如：
< button type=“button” class=“btn btn-primary” data-toggle=“collapse”
data-target="#demo">
系统设置
</ button>
< div id=“demo” class=“collapse in”>
折叠内容
</ div>
和模态框用法一样，也可以通过js来控制折叠的显示和隐藏，方法是
显示：KaTeX parse error: Expected 'EOF', got '#' at position 2: (#̲id').collapse(“…(#id’).collapse(“hide”)
id是折叠内容元素的id
折叠插件通常用于系统的导航，下面是一个完整的例子
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>折叠导航
< link rel=“stylesheet” href="…/css/bootstrap.min.css">
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
< a href="">本地磁盘：(E)
< a href="">本地磁盘：(F)
< div class="panel panel-primary"> < div class="panel-heading"> 我的文档
我的收藏
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#main"
href="#three">
网上邻居
</a>
</h4>
</div>
<div id="three" class="panel-collapse collapse">
<div class="panel-body">
<a href="">本地连接</a><br>
<a href="">网络连接</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-8">
<div class="tab-content">
<div id="c" class="tab-pane fade">
C盘
</div>
<div id="d" class="tab-pane fade">
D盘
</div>
</div>
</div>
<div class="col-xs-2"></div>
</div>
$(function () {
//默认显示
$(’#two’).collapse(‘show’)
});
</ script>
</ body>
</ html>
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
