Bootstrap进阶
一、栅格布局
0x1 栅格系统
1、规则
- <@div class="container">
调试内外边距 对齐方式...
2、布局基础
- col-md-x 占据几列
- offset-x 偏移x个列 相当于 margin-left
- 嵌套 row元素只能嵌套在 col中 把父row 划分成12列
|
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> |
- 列的顺序问题
- col-md-push-7 元素从左向右移动7个栅格
- col-md-pull-7 元素从右向左移动7个栅格
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> |
0x2 基础排版
- 标题 h1-h6 36 30 24 18 14 12px
- 内联列表 class="list-inline" 列表水平排列
- 表格 class = table
- table-striped 隔行变色
- table-bordered 表格边框
- table-hover 鼠标悬停变色
- 按钮 class = btn
- btn-block 父元素宽度的100%
- active 激活状态
- disabled 禁用
- 常用类
- .pull-right/left 右左浮动
- .content-block 块元素
- clearfix:befor after 清除浮动
二、常用组件
0x1 图标
必须是内联元素，分为基本类、图标类
需要内联元素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> |
0x2 下拉菜单
- 依赖于jQuery和bootstrap.js
- 必须要有dropdown的容器将下拉菜单包裹
- 下拉项必须要有class="dropdown-toggle" data-toggle="dropdown"
- 下拉小三角 <@b class="caret">
- 子菜单 <@ul class="dropdown-menu">
- 分割线 <@li class="divider">
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> |
0x3 按钮组
- 按钮组 btn-group
- 两端圆角中间没有
- button和a标签的效果一样
- btn-group-justified 两端对齐
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> |
0x4 按钮组
- 和下拉菜单相似
- 调整大小btn-lg/sm/xs
|
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> |
0x5 输入框
- span.nput-group-addon 可以添加输入框附加内容
- input.form-control 使之对齐
|
1 2 3 4 5 |
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> |
0x6 导航
- 横向排列 nav nav-tabs
- 胶囊导航 nav-pills
- 导航全屏自适应 nav-justified
- 添加下拉菜单 dropdown
|
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> |
0x7 分页
- aria-label 标签字符串
- aria-hidden 屏幕识读设备 = true
- 第一个最后一个有圆角
|
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> |
0x7 标签
|
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> |
0x8 徽章
- 提示没有读取
- active 激活状态
- badge 多少未读取
|
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> |
0x9 进度条
|
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> |
三、常用插件
0x1 模态框
通过data属性来调用，子窗体覆盖父窗体。
- data-toggle="modal" 用于打开modal窗口
- data-target="#idName" 打开的目标
- modal: 把div元素识别成模态框
- fade 当窗口切换，淡入淡出
- modal-dialog 对话框
- modal-content 内容
- modal-header 框内部的头
- close 关闭按钮的样式
- data-dismiss="modal" 关闭窗口
- modal-body 窗口主要内容
- modal-footer 窗口底部区域
|
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"); //调用模态窗口 }) |
