Bootstrap笔记
投稿于 被查看 44554 次 评论：35
Bootstrap笔记
大概看了一遍，要真的用bootstrap写网页还得练：
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--据说以上标签必须写在最前面-->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-block" style="width:90%;" >
<div class="row" style="margin-top:30px;border:1px solid #f00;">
<div style="background:#fcc;height:50px;" class="col-md-3 col-lg-1 col-sm-3 col-xs-3">栅格1</div>
<div style="background:#cfc;height:50px;" class="col-md-5 col-lg-2 col-lg-offset-6 col-sm-5 col-xs-8">栅格2</div>
<div style="background:#ccf;height:70px;" class="col-md-4 col-lg-3 col-sm-4 col-xs-1">栅格3</div>
</div>
<pre style="margin-top:10px;">
//布局容器
.container{固定宽度布局}
.container-fluid{百分百布局}
//栅格化
.row {行}
.col-lg-1~12{大屏幕}
.col-md-1~12{中等屏幕}
.col-sm-1~12{小屏幕 平板}
.col-xs-1~12{超小屏幕 手机}
.col-md-offset-*{列偏移*个单位,省略lg xs sm...}
//响应式,在相应的设备上显示或隐藏
.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.visible-*-block{display:block; *为sm,md,lg等}
.visible-*-inline{display:block; *为sm,md,lg等}
.visible-*-inline-block{display:block; *为sm,md,lg等}
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
</pre>
<div style="margin-top:60px;">
<h2>标题<small>嗯</small></h2>
<pre>
h1~6 || .h1~6 标题
small || .small 副标题，嵌套在h1里面
del 无用文本
.bg-info .bg-danger .bg-success .bg-warning .bg-primary{文字背景}
.center-block{居中，margin-left:auto;margin-right:auto;}
.clearfix{清除浮动}
.hide , .show{强制隐藏或显示}
.text-info .text-danger .text-success .text-warning .text-primary{文字颜色}
.text-left , .text-center , .text-right 文本对齐
.text-overflow 截断
ul去除默认样式 .list-unstyled
</pre>
</div>
<div style="margin-top:60px;">
<div>
<img src="http://www.gscn.com.cn/pic/0/10/25/67/10256792_602601.jpg" style="width:300px;height:auto;" class="img-rounded" />
<img src="http://www.gscn.com.cn/pic/0/10/25/67/10256792_602601.jpg" style="width:300px;height:auto;" class="img-circle" />
<img src="http://www.gscn.com.cn/pic/0/10/25/67/10256792_602601.jpg" style="width:300px;height:auto;" class="img-thumbnail" />
</div>
<pre style="margin-top:10px;">
三种图片样式：.img-thumbnail , .img-circle , .img-rounded
</pre>
</div>
<div style="margin-top:60px;">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><td>#</td><td>col1</td><td>col2</td></tr>
</thead>
<tbody>
<tr><td>5434</td><td>312</td><td>1123</td></tr>
<tr><td>5434</td><td>312</td><td>1123</td></tr>
<tr><td>5434</td><td>312</td><td>1123</td></tr>
</tbody>
</table>
<pre class="center-block" style="margin-top:10px;">
//表格
.table{基本样式}
.table-condensed{表格更紧凑,padding减半}
.table-striped{隔行换色}
.table-bordered{表格边框}
.table-hover{鼠标经过行换色}
</pre>
</div>
<div class="margin-top:60px;">
<form class="form-group bg-info" style="margin-top:30px;">
<input type="text" class="form-control" />
<div class="checked disabled">
<label><input class="input-xs" type="checkbox" disabled="disabled">checkbox</label>
<label><input class="input-xs" type="checkbox">checkbox</label>
</div>
<span class="help-block">这里是帮助文本</span>
<button type="submit" class="btn btn-default">submit</button>
</form>
<pre style="margin-top:10px;">
//form
.form-inline{内联表单，输入框不再100%}
.form-horizontal{表单水平并排布局}
.form-control{输入框样式，宽度100%}
.form-group{放入label与input}
.btn{按钮，用.input-group-btn包裹起来,如果用a标签做按钮且不跳转加属性role="button"}
.btn-default{默认样式}
.btn-success .btn-info .btn-warning .btn-danger{各种预定义样式}
.btn-lg .btn-sm .btn-xs .btn-md{按钮尺寸}
.btn-block{block样式}
*所有的input都要添加type
.input-group{输入框组}
.input-group-addon{横排按钮，用input-group包起来，也可以加在checkbox的父节点上}
.input-lg , .input-sm , input-md {input尺寸}
.help-block{辅助文本}
.disabled{对于子元素中设置disabled的元素，鼠标设置为禁止点击的样式}
</pre>
</div>
<div style="margin-top:60px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#myModal" role="button">遮罩层</a>
<pre style="margin-top:10px;">
弹层：
触发按钮必须加 data-toggle="modal" data-target="#myModal"，#myModal为遮罩层id；
遮罩层内关闭按钮必须加 data-dismiss="modal"
.modal{遮罩层}
.fade{动画}
.modal > .modal-dialog{容器}
.modal > .modal-dialog > .modal-content{模块}
.modal > .modal-dialog > .modal-content > .modal-header{模块头部}
.modal > .modal-dialog > .modal-content > .modal-body{模块内容}
.modal > .modal-dialog > .modal-content > .modal-footer{模块底部}
</pre>
</div>
<div style="margin-top:60px;">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li class="disabled"><a href="#">4444</a></li>
<li class="divider"></li>
<li><a href="#">5555</a></li>
</ul>
</div>
<pre style="margin-top:10px;">
下拉菜单要用.dropdown或者一个position:relative的元素包起来
触发按钮必须加 data-toggle="dropdown"
ul添加.dropdown-menu
</pre>
</div>
<div style="margin-top:60px;">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<input type="button" class="btn btn-default" value="1" />
<input type="button" class="btn btn-default" value="2" />
<input type="button" class="btn btn-default" value="3" />
</div>
<div class="btn-group" role="group">
<input type="button" class="btn btn-default" value="4" />
<input type="button" class="btn btn-default" value="5" />
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<pre style="margin-top:10px;">
按钮组
用.btn-group包起来，如果竖排的话用.btn-group-vertical包起来
给按钮父级添加.btn-group-*设置所有按钮大小(*代表lg,md,xs,sm)
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
</pre>
</div>
<div style="margin-top:60px;">
<div class="navigation">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">标签1</a></li>
<li role="presentation"><a href="#">标签2</a></li>
<li role="presentation">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navbar navbar-default" style="margin-top:30px;">
<div class="container">
<a class="navbar-brand" href="#" style="padding:6px 15px;">
<img alt="Brand" src="https://www.baidu.com/img/baidu_jgylogo3.gif">
</a>
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn">SUBMIT</button>
</form>
</div>
</nav>
<nav style="margin-top:30px;">
<ul class="pager">
<li class="previous"><a href="#"><span>←</span>上一页</a></li>
<li>上下页</li>
<li class="next"><a href="#">下一页<span>→</span></a></li>
</ul>
</nav>
<pre>
nav固定顶部加.navbar-fixed-top固定底部加.navbar-fixed-bottom
导航要用nav或.navgation包起来
ul添加.nav
为了对齐表单要加.navber-form
徽章：<span class="badge">2</span>
上下页:pager > previous,next
</pre>
</div>
<div style="margin-top:60px;">
<ul class="list-group">
<li class="list-group-item">list1<span class="badge">3</span></li>
<li class="list-group-item">list2<span class="badge">5</span></li>
<li class="list-group-item">list3<span class="badge">4</span></li>
<li class="list-group-item">list4<span class="badge">7</span></li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item active">button1</a>
<a href="#" class="list-group-item">button1</a>
<a href="#" class="list-group-item disabled">button1</a>
<a href="#" class="list-group-item list-group-item-success">button2</a>
</div>
<pre>
列表组 父元素加.list-group,子元素加.list-group-item
</pre>
</div>
<div style="margin-top:60px;">
<div class="panel panel-default">
<div class="panel-heading text-center">这里是标题</div>
<div class="panel-body">
这是一个面板<br/>
这里是内容
</div>
<div class="panel-footer text-right">脚注内容</div>
</div>
<pre>
面板：.panel panel-default , 可以加情景效果: .panel-success , .panel-info ......
头部：.panel-heading
内容：.panel-body
脚部：.panel-footer
</pre>
</div>
</div>
<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>
</div>
</div>
</body>
</html>
用户评论