Bootstrap进阶
一、栅格布局
0x1 栅格系统
1、规则
- <@div class="container">
调试内外边距 对齐方式... row 默认12列 具体内容放在列元素之内,列元素能成为row元素的直接">
1、规则
调试内外边距 对齐方式...
2、布局基础
1 2 3 4 5 6 7 8 9 10 |
<div class="row"> <div class="col-sm-9"> 1 <div class="row"> <div class="col-md-4">1</div> <div class="col-md-8">2</div> </div> </div> </div> |
3、响应式
原理就是在class里面针对不同分辨率做不同的col- 布局
Demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="header" style="height:60px;background:#000" class="row"> <div id="heaText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8"> welcome </div> <div class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px;color:#fff"> <div id="heaLeft" style="margin-top:16px;"> <button id="left1" style="background:#000;border:0;" class="btn"> DOOLAR </button> <button id="left2" style="background:#000;border:0;"> <span class="caret"></span> </button> </div> </div> <div class="pull-right col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px; color:#fff"> <div id="heaRight" class="pull-right" style="margin-top:16px;"> <button id="right1" style="background:#000;border:0;"> <span class="caret"></span> </button> <button id="right" style="background:#000;border:0;" class="btn"> DOOLAR </button> </div> </div> </div> |
必须是内联元素,分为基本类、图标类
需要内联元素span,使用时文字前面加空格
1 2 3 4 5 6 7 8 9 |
<span class="glyphicon glyphicon-user"></span> User //输入框 <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-pencil"></span> </span> <input type="text" class="col col-lg-2 form-control"> </div> |
Demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul class="nav navbar-nav"> <li><a href="#">菜单一</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单二<b class="caret"></b> </a> <ul class="dropdown-menu"> <li>子菜单一</li> <li class="divider"></li> <li>子菜单二</li> </ul> </li> <li><a href="#">菜单三</a></li> </ul> |
Demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="btn-group"> <button type="button" class="btn btn-default">首页</button> <button type="button" class="btn btn-info">分类</button> <button type="button" class="btn btn-info">分类</button> <button type="button" class="btn btn-info">分类</button> <button type="button" class="btn btn-success">喜欢</button> </div> <div class="btn-group"> <a class="btn btn-default">首页</a> <a class="btn btn-info">分类</a> <a class="btn btn-success">喜欢</a> </div> <br> <br> <!-- 按钮工具栏 btn-group-lg/sm/xs --> <div class="btn-toolbar"> <div class="btn-group"> <a class="btn btn-default">首页</a> <a class="btn btn-info">分类</a> <a class="btn btn-success">喜欢</a> </div> </div> <br> <br> <div class="btn-group btn-group-justified"> <a class="btn btn-default">首页</a> <a class="btn btn-info">分类</a> <a class="btn btn-success">喜欢</a> </div> |
1 2 3 4 5 6 7 8 9 10 11 |
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 分类 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>少儿</li> <li>计算机</li> <li>社会</li> </ul> </div> |
1 2 3 4 5 |
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">分类</a></li> <li><a href="#">推荐</a></li> </ul> //添加下拉菜单的导航 <ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">分类</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 推荐 <span class="caret"></span> //小三角 </a> <ul class="dropdown-menu"> <li>1</li> <li class="divider"></li> //分割线 <li>2</li> </ul> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </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="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> |
1 2 3 4 5 6 7 |
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> |
1 2 3 4 5 6 |
<ul class="nav nav-pills" role="tablist"> //role屏幕阅读器残障者 <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> </ul> |
1 2 3 4 5 6 |
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 60% </div> </div> |
通过data属性来调用,子窗体覆盖父窗体。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 模态框 </button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> X </button> <h4 class="modal-title" id="myModalLabel"> 标题 </h4> </div> <div class="modal-body"> aaaaaaaaa </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button> <button type="button" class="btn btn-primary">取消</button> </div> </div> </div> </div> //用jQuery调用模态框,不推荐 $(function(){ $("#myModal").modal("hide"); //调用模态窗口 }) |