Bootstrap入门
来源:互联网 发布:薛之谦淘宝店女友 编辑:程序博客网 时间:2024/04/28 11:07
Bootstrap
1 栅格系统 与 响应式布局
页面划分为不同的格子,在不同的屏幕尺寸下,选择性的排列这些格子:横排或者竖排。
以往的判断,是根据media属性,如
:@media
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
bootstrap的底层原理就是 栅格系统+media查询
2 容器
.container (固定宽度) .container-fluid (100% 宽度)
页面内容要包含在这两个class的div里面
根据宽度,可有的列数可以自动增加到最多12
假如需要3个等宽的列,可以设置为三个.col-xs-4
3 行 列 与容器的关系
<div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div>
即 容器在最外层,然后写行,然后在行里面写列
4 嵌套使用栅格系统(比如上面的布局,要在其中一个格子里继续使用一个栅格系统)
<div class="container"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> <div class="col-md-4"></div> </div> </div>
如上面的样例代码,继续使用的话,是在col里面 继续写(除了不用.container或者.container-fluid)
5 媒体查询
解释.col-xx-y
.col-xx-y。 y是数字,表示该元素的宽度占据12列中的多少列。而xx只有特定的几个值可供选择,分别是xs、sm、md、lg。这些叫做断点类型。
当屏幕宽度大于等于 断点时,横排,否则剩下的竖排。
xs表示极小(默认左右理论的屏幕都会大于它),那么列都会横排;
6 流式布局例子
<div class="container"> <div class="row"> <div class="col-sm-6 col-lg-3">1</div> <div class="col-sm-6 col-lg-3">2</div> <div class="col-sm-6 col-lg-3">3</div> <div class="col-sm-6 col-lg-3">4</div> </div> </div>
如果屏幕为sm(768px),那么样子类似:
1 2
3 4
如果为lg(1024),那么:
1 2 3 4
如果小于sm, 那么
1
2
3
4
详细看http://www.blogways.net/blog/2016/06/05/web-bootstrap.html
0 0
- BootStrap 入门
- Bootstrap入门
- bootstrap入门
- BootStrap入门
- bootstrap入门
- bootstrap入门
- BootStrap入门
- bootstrap 入门
- Bootstrap入门
- Bootstrap入门
- Bootstrap-入门
- Bootstrap入门
- Bootstrap 入门
- Bootstrap入门
- Bootstrap入门
- bootstrap入门
- bootstrap-入门
- bootstrap-入门
- Android APK安装与卸载的代码实现
- 关于 设备节点自动创建时 编译出现的问题 解决方法
- java.lang.NoClassDefFoundError: javax/comm/SerialPortEventListener 和 javax.comm.NoSuchPortException
- hdu 5703 Desert(找规律)
- C++中string::npos的一些用法总结
- Bootstrap入门
- QM Bites – Order Your Includes (Twice Over)
- MySQL 数据去重
- spring security + memcached 重启tomcat 匿名(anonymousUser)问题
- 【那些工作中学到的小技巧】代码阅读小工具
- chrome os 安装手册
- Kettle连接ORACLE失败,报错IO异常:
- AngularJS指令进阶 – ngModelController详解
- 几种C++ std::string和std::wstring相互转换的转换方法