bootstrap-入门
2017-07-19 12:12
148 查看
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style type="text/css"> div{border: 1px solid black;} </style> </head> <body> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <p>添加类形如:col-md-8,即表示当屏幕的尺寸大于等于992时显示为1行12列中占8列;当屏幕尺寸小于992时则该列会以一行显示</p> <script src="bootstrap/jq/jq.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
针对不同屏幕进行规定,防止列堆叠不好看
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <p>在中等屏幕以及大屏幕下以一行两列显示,一列占8格,一列占4格</p> <p>在超小屏幕以及小屏幕下以两行显示,一行占12格,一行占6格</p> <strong>提示:行数会根据屏幕下所占的列决定,一旦超出12列则会另起一行</strong>
列偏移
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <p>在中等屏幕以及大屏幕下以一行显示有两列,一列占4格,另一列占4格并在原来位置上向右偏移4个列</p> <strong>col-md-offset-4表示将.col-md-4向右移动了4个列的宽度</strong>
嵌套列
<div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6 </div> <div class="col-md-6"> Level 2: .col-md-6 </div> </div> </div> </div> <p>在中、大屏幕下有一列占9格,然后这一列又分两列(各占其一半)</p>
列移动
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> <p>col-md-push-3代表列往<strong>右</strong>移3列。push-推-右</p> <p>col-md-pull-9代表列往<strong>左</strong>移9列。pull-拉-左</p>
通过变量来自己定义列数、槽宽、媒体查询阈值。–不知道怎么弄
相关文章推荐
- bootstrap快速入门笔记(六)-代码
- Bootstrap入门书籍之(五)导航条、分页导航
- Bootstrap入门(十七)组件11:分页与标签
- BootStrap入门教程(三)之响应式原理
- BootStrap入门教程 (二)
- Bootstrap快速入门
- Bootstrap入门
- BootStrap入门教程 (一)
- BootStrap入门教程 (四)
- bootstrap入门模板开发(导航+正文)
- 深入理解BootStrap Item2 -- 简单入门
- BootStrap入门教程 (三)
- BootStrap入门教程 (二)
- bootstrap常用功能快速入门以及常见问题解决方案
- BootStrap快速入门
- bootstrap常用功能快速入门以及常见问题解决方案
- bootstrap 入门
- Bootstrap每天必学之简单入门
- bootstrap-table的入门使用——从服务器获取数据
- Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏