BootStrap
1. 布局容器和栅格网络系统
1.1 布局容器
- container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
- container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
1.2 栅格网格系统
- 列组合：
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
<div class="row">
<div class="col-md-2">2列</div>
<div class="col-md-10">10列</div>
</div>
</div>
- 列偏移：
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>
- 列排序：
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">2列</div>
</div>
</div>
- 列嵌套：
<div class="container">
<div class="row">
<div class="col-md-2">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-10">我的里面嵌套了一个网格
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>
2. 常用样式
排版：
- 标题：
<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>
- 段落：
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
- 强调：
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
- 对齐效果：
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>
-
列表：
- 去点列表：
<ul class="list-unstyled"> <li>无序项目列表一</li> <li>无序项目列表二</li> </ul>- 内联列表：
<ul class="list-inline"> <li>首页</li> <li>java学院</li> <li>在线课堂</li> </ul>- 定义列表：
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表是一种样式表语言</dd> </dl> <dl class="dl-horizontal"> <dt>HTML 超文本标记语言</dt> <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd> <dt>测试标题不能超过160px的宽度,否则2个点</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd> </dl> -
代码：
- 单行内联代码：
<code>this is a simple code</code>- 快捷键：
<p>使用<kbd>ctrl+s</kbd>保存</p>- 多行块代码：
<!-- 代码会保留原本的格式，包括空格和换行 --> <pre> public class HelloWorld { public static void main(String[] args){ System.out.println("helloworld..."); } } </pre> <!-- 显示html标签的代码需要适应字符实体 小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代 --> <pre> <ul> <li>测试实体符</li> </ul> </pre> <!-- 当高度超过，会存在滚动条 --> <pre class="pre-scrollable"> <ol> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> </ol> </pre> -
表格：
- 表格样式：
.table：基础表格、.table-striped：斑马线表格、.table-bordered：带边框的表格、.table-hover：鼠标悬停高亮的表格、.table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
- tr、th、td样式：
类 描述 .active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作 表单：
- 表单控件：
输入框 text .form-control
<div class="col-sm-3"> <input type="text" name="" id="" class="form-control" /> <input type="text" name="" id="" class="form-control input-lg" /> <input type="text" name="" id="" class="form-control input-sm" /> </div>下拉选择框 select 多行选择设置：multiple=“multiple”
<div class="col-sm-3"> <select class="form-control"> <option>北京</option> <option>上海</option> <option>深圳</option> </select> <select class="form-control" multiple="multiple"> <option>北京</option> <option>上海</option> <option>深圳</option> </select> </div>文本域 textarea
<div class="col-sm-3"> <textarea class="form-control" rows="3"></textarea> </div>复选框 checkbox
垂直显示： .checkbox 水平显示： .checkbox-inline
<!-- 垂直显示 --> <div> <div class="checkbox"> <label><input type="checkbox" >游戏</label> </div> <div class="checkbox"> <label><input type="checkbox" >学习</label> </div> </div> <!-- 水平显示 --> <div> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> <label class="checkbox-inline"> <input type="checkbox" >学习 </label> </div>单选框 radio
垂直显示： .radio 水平显示： .radio-inline
<!-- 垂直显示 --> <div> <div class="radio"> <label><input type="radio" >男</label> </div> <div class="radio"> <label><input type="radio" >女</label> </div> </div> <!-- 水平显示 --> <div> <label class="radio-inline"> <input type="radio" >男 </label> <label class="radio-inline"> <input type="radio" >女 </label> </div>按钮
基础样式： btn
<button class="btn">按钮</button>附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class="btn btn-danger">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-default">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-link">按钮</button>多标签支持：使用 a div 等制作按钮
<a href="##" class="btn btn-info">a标签按钮</a> <span class="btn btn-success">span标签按钮</span> <div class="btn btn-warning">div标签按钮</div>按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button> <button class="btn btn-primary btn-sm">小型按钮.btn-sm</button> <button class="btn btn-primary">正常按钮</button> <button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>按钮禁用：方法1：在标签中添加disabled属性；方法2：在元素标签中添加类名"disabled"
注：在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮
<button class="btn btn-danger" disabled="disabled">禁用按钮</button> <button class="btn btn-danger disabled">禁用按钮</button>- 表单布局：
水平表单
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="email" class="control-label col-sm-2">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入邮箱"/> </div> </div> <div class="form-group"> <label for="pwd" class="control-label col-sm-2">密码</label> <div class="col-sm-10"> <input type="pwd" class="form-control" placeholder="请输入密码" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2"> <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 class="btn btn-default">提交</button> </div> </div> </form>内联表单
<form class="form-inline"> <div class="form-group"> <label for="email" >邮箱</label> <input type="email" class="form-control" placeholder="请输入邮箱"/> </div> <div class="form-group"> <label for="pwd" >密码</label> <input type="pwd" class="form-control" placeholder="请输入密码" /> </div> <div class="form-group checkbox"> <label><input type="checkbox" />记住密码</label> </div> <div class="form-group"> <button class="btn btn-default">提交</button> </div> </form> -
缩略图：
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/IMG_0131.JPG" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
- 面板：
<div class="panel panel-success">
<div class="panel-heading">
......
</div>
<div class="panel-body">
......
</div>
</div>
3. BootStrap插件
3.1 导航
- 标签式导航：
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
- 胶囊式导航：
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
3.2 分页导航
- 分页：
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- 翻页：
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
3.3 下拉菜单
<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢频道 <span class="caret"></span><!--下拉箭头-->
</button>
<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
<ul class="dropdown-menu"> <!--dropdown-menu-right右对齐-->
<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
<li class="dropdown-header">----科普----</li>
<li>
<a href="#">人与自然</a>
</li>
<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
<li class="divider"></li>
<li class="dropdown-header">----搞笑----</li>
<li>
<a href="#">欢乐喜剧人</a>
</li>
<li>
<a href="#">快乐大本营</a>
</li>
<li class="divider"></li>
<li class="disabled"> <!--禁用状态-->
<a href="#">生活大爆炸</a>
</li>
</ul>
</div>
3.4 模态框
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| Toggle: .modal(‘toggle’) | 手动切换模态框。 | $('#identifier').modal('toggle'); |
| Show: .modal(‘show’) | 手动打开模态框。 | $('#identifier').modal('show'); |
| Hide: .modal(‘hide’) | 手动隐藏模态框。 | $('#identifier').modal('hide'); |
1529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
