Bootstrap学习
Bootstrap–前端框架
第一部分 全局样式
1.表格
1》基本表格
<table class="table">
<thead>
<tr>
<td>#</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>4</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>2》.table-striped ———————–斑马线
.table-bordered ———————– 添加边框
.table-hover ——————————鼠标悬停响应
3》响应式表格
添加父容器 —————————- .table-responsive
2.表单
1》基本样式
.form-control ——————– width:100%
<form>
<div class="from-group">
<label for="a">name : </label>
<input type="text" class="form-control" id="a" placeholder="名字">
</div>
</form>2》内联表单 ———————- .form-inline
<form class="form-inline">
<div class="form-group">
<label for="a" >name : </label>
<input type="text" class="form-control" id="a" placeholder="名字">
</div>
<div class="form-group">
<label for="b" >password : </label>
<input type="password" class="form-control" id="b" placeholder="密码">
</div>
</form>3》水平表单
<form class="form-horizontal">
<div class="form-group">
<label for="a" class="col-lg-2 control-label">name : </label>
<div class="col-lg-10">
<input type="text" class="form-control" id="a" placeholder="名字">
</div>
</div>
</form>二、第二部分 组件
1.布局–栅格系统
1》容器
-container-fluid – 流体布局
-container –固定布局 width:1170px 970px 750px auto –(移动优先)
注意：最好不要让容器嵌套，同一个页面可以有不同个容器，比如头尾流动，内容固定。假如不想让容器宽度变化，可以给其加一个宽度，赋予其优先级(!important)
2.栅格系统
1》包裹— .row
子元素— .col-lg-* —12格 —浮动布局
.col-lg-*
.col-md-*
.col-sm-*
.col-xs-* —–规定了垂直排列的阈值
注意使用组合方式—可以实现过多效果
<div class="row">
<div class="col-lg-3 col-md-6 "><p></p></div>
<div class="col-lg-3 col-md-6 "><p></p></div>
<div class="col-lg-3 col-md-6 "><p></p></div>
<div class="col-lg-3 col-md-6 "><p></p></div>
</div>2》列偏移— col-lg-offset-* 向右偏移
排序— col-lg-push-*
col-lg-pull-*
<div class="row">
<div class="col-lg-3 col-lg-push-9 "><p></p></div>
<div class="col-lg-9 col-lg-pull-3"><p></p></div>
</div>3》清除浮动
<div class="row">
<div class="col-lg-6">lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll!</div>
<div class="col-lg-3">fffffffffffffffffffff</div>
<div class="col-lg-3">ffffffffffffffffffff</div>
<div class="col-lg-3">fffffffffffffffffffff</div>
</div>
<div class="row">
<div class="col-lg-6">llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
<div class="col-lg-3">fffffffffffffffffffff</div>
<div class="col-lg-3">ffffffffffffffffffff</div>
<div class="clearfix"></div>
<div class="col-lg-3">fffffffffffffffffffff</div>
</div>
3.响应式工具
1》visible
visible-lg-block
-md-block
-lg-inline-block —在此分辨之上是显示的
2》hidden-sm —-在此分辨率之下隐藏
4.字体图标
<div class="glyphicon glyphicon-search"></div>5.按钮
1》 基类 btn
btn-link btn-default btn-success………. —-颜色
btn-lg btn-sm btn-xs —-大小
active disabled —-状态
btn-block —块级
<input type="button" class="btn btn-block btn-success" value="按钮">2》按钮组
添加父容器 ——. btn-group
<div class="btn-group">
<button class="btn btn-primary">btn</button>
<button class="btn btn-primary">btn</button>
<button class="btn btn-primary">btn</button>
</div>btn-group-justified ———————-自适应对齐（注意：仅适用于a标签，如果button\input需要添加父容器.btn-group）
<div class="btn-group btn-group-justified">
<a class="btn btn-primary">btn</a>
<a class="btn btn-primary">btn</a>
<a class="btn btn-primary">btn</a>
</div>垂直排列 ———-btn-group-vertical（注意此时不要添加btn-group）
<div class="btn-group-vertical">
<a class="btn btn-primary">btn</a>
<a class="btn btn-primary">btn</a>
<a class="btn btn-primary">btn</a>
</div>3》添加箭头 —–.caret （尽量使用a\button标签）
<a class="btn btn-primary">btn<span class="caret"></span></a>
<a class="btn btn-primary dropup">btn<span class="caret"></span></a>4》下拉菜单
data-* ——-js触发器
基本样式
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<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><a href="#">Separated link</a></li>
</ul>
</div>6.选项卡
1》
头部 ———–.nav .nav-tabs
自适应 ——-.nav-justified
线条自适应 ——-.nav-tabs-justified
药丸 ——-.nav-pills
垂直 ——-.nav-stacked
<ul class="nav nav-pills nav-justified">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu btn-block">
<li class="text-center"><a href="#">Home</a></li>
<li class="text-center"><a href="#">Home</a></li>
</ul>
</li>
<li ><a href="#">Home</a></li>
<li ><a href="#">Home</a></li>
</ul>2》主体
类名 ———————- .tab-content
<ul class="nav nav-pills nav-justified">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu btn-block">
<li class="text-center"><a href="#a" data-toggle="tab">Home</a></li>
<li class="text-center"><a href="#b" data-toggle="tab">Home33</a></li>
</ul>
</li>
<li ><a href="#c" data-toggle="tab">Home</a></li>
<li ><a href="#d" data-toggle="tab">Home</a></li>
</ul>
<ul class="tab-content">
<li id="a" class="tab-pane active">aaaaaaaaa</li>
<li id="b" class="tab-pane ">bbbbbbbbb</li>
<li id="c" class="tab-pane ">ccccccccc</li>
<li id="d" class="tab-pane ">ddddddddd</li>
</ul>7.导航条
1》基类 ————— .nav .navbar
logo —————添加父容器 .navbar-header
导航 ————— .navbar-nav
<nav class="nav navbar-default mystyle">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="img/new_logo.ede2316d.png" /></a>
</div>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
<a class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></a>
</div>
</form>
<ul class="nav navbar-nav navbar-left">
<li><a href="#">首页</a></li>
<li><a href="#">话题</a></li>
<li><a href="#">发现</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册知乎</a></li>
<li><a href="#">登录</a></li>
</ul>
<button class="btn btn-success navbar-btn navbar-right">提问</button>
</div>
</nav>2》响应式
注意：需要给需要折叠的内容加父容器 class=”collapse navbar-collapse”
<nav class="nav navbar-inverse">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#myNav" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">logo</a>
</div>
<div id="myNav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">猫</a></li>
<li><a href="#">狗</a></li>
<li><a href="#">兔</a></li>
</ul>
</div>
</div>
</nav>8.路径导航
标签 ——————————- ol
类名 ——————————– .breadcrumb（面包屑效果）
<ol class="breadcrumb">
<li><a href="">世界</a></li>
<li><a href="">动物</a></li>
<li class="active">猫</li> //最后一项没必要再加链接
</ol> 9.分页
1》标签 —————————–ul
类名 —————————– .pagination
<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>2》翻页
<ul class="pager">
<li class="previous"><a href="#">pre</a></li>
<li class="next"><a href="#">next</a></li>
</ul>10.徽章
11.巨幕
<div class="jumbotron">
<div class="container">
<h1>巨幕</h1>
<p>10.1 相约青岛</p>
<button type="button" class="btn btn-primary">了解详情</button>
</div>
</div>12.警告框
1》普通警告框
<div class="alert alert-warning">警告！</div>
<div class="alert alert-info">信息</div>2》可关闭的警告框
<div class="alert alert-warning">警告！</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert" >×</button>
<p>关闭</p>
</div>13.进度条
有两层组成 容器————— .progresee
包裹————– .progress-bar
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%" >60%</div>
</div>
</div>14.媒体对象
<div class="media">
<div class="media-left media-middle">
<a href="#"><img src="img/new_logo.ede2316d.png"></a>
</div>
<div class="media-body">
<h3 class="media-heading">描述</h3>
<div class="media">
<div class="media-left">
<a href="#"><img src="img/new_logo.ede2316d.png"></a>
</div>
<div class="media-body">
<p>媒体列表的层叠</p>
</div>
</div>
</div>
</div>15.面板
<div class="panel panel-primary">
<div class="panel-heading">
<h3>标题</h3>
</div>
<div class="panel-body">
<p>llllllllllllllllllllllllllll</p>
</div>
<div class="panel-footer">
<p>这是页脚</p>
</div>
</div>