BootStrap网格布局
如何使用BootStrap样式
BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
在代码中,直接使用class就可以使用其定义的样式,例如使用它button样式,就可以按照下面的方式:
<button class="btn btn-primary" type="button">Reset</button>
什么是网格布局
目前流行的响应式布局,在显示界面设定了集中宽度,当宽度满足一定的标准时,就是用当前宽度支持下的样式。
这样就可以使一种开发,支持移动端、以及各种分辨率的显示器,达到良好的使用效果。
BootStrap把网页分成12个网格,并有下面四中宽度:自动、750px、970px和1170px
当屏幕属于其中某个区间时,自动使用对应的样式。
使用的基本语法,类似下面:container---->row---->column
<div class="container"> <div class="row"></div> </div>
提供个简单的样例:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基本用法</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head><body> <div class="container"><div class="row"><button class="btn btn-primary col-md-4" type="button">test</button><button class="btn btn-primary col-md-8" type="button">test</button></div><div class="row"><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button></div><div class="row"><button class="btn btn-primary col-md-3" type="button">test</button><button class="btn btn-primary col-md-6" type="button">test</button><button class="btn btn-primary col-md-3" type="button">test</button></div> </div> </body> </html>
主要要满足网格数目不超过12个,超过的部分会自动挤到下一列!
样式运行效果分别如下:
最大的宽度下:
中等宽度下:
最小宽度下:
网格列偏移
BootStrap中支持网格的列偏移:直接在样式中col-md-offset-*就可以达到偏移效果。
例如下面的代码:
<div class="container"><div class="row"><button class="btn btn-primary col-md-4" type="button">test</button><button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button></div><div class="row"><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button></div> </div>
第一行的第二个button就达到了列偏移4个网格的效果:
网格嵌套
在BootStrap中也支持网格的嵌套,同样也需要嵌套中的网格满足12格的划分原则
<div class="container"><div class="row"><button class="btn btn-primary col-md-4" type="button">test</button><div class="col-md-8"><div class="row"><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button></div></div></div><div class="row"><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button><button class="btn btn-info col-md-4" type="button">test</button></div> </div>
效果如下:
BootStrap网格布局相关推荐
- Bootstrap——网格布局
网格布局 如图: 网格布局的列数最多可以分为12列 如果要列数大于12则会另起一行补齐多余的列数 如果份数相加小于12则会铺不满整个宽度 代码如下: <!DOCTYPE html> < ...
- bootstrap网格布局自适应问题
一.确保网格自适应的几点 1.head部分引入viewport属性 <meta http-equiv="X-UA-Compatible" content="IE=e ...
- Bootstrap研究1-精巧的网格布局系统
Bootstrap研究1-精巧的网格布局系统 本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Flu ...
- HTML创建12列小屏幕网格,Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- grid layout(网格布局、栅格布局、grid布局):bootstrap,请到历史书报道!
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- CSS Grid 网格布局教程
作者: 阮一峰 日期: 2019年3月25日 一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 ...
- css 网格布局_CSS网格布局
css 网格布局 网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the ne ...
最新文章
- 图像复原的神经网络稀疏表示
- iOS: 零误差或极小误差的定时执行或延迟执行?
- 挺个性的jQuery返回底部、返回顶部特效
- ajax怎么在html与php中使用,如何使用ajax和php将数据从数据库表放到html表
- python中可以表示任意大的整数_Python无法表示99999999999999999999这样大的整数。
- 纵横免root框架打不开应用怎么办_很好用的软件多开神奇安卓欧皇十框架!!!...
- powerpc 汇编linux,PowerPc下的寻址模式
- Linux进阶之路————scp指令介绍与演示
- java visitor_java 的visitor方式
- 注解之RetentionPolicy,ElementType
- Android NotificationManager详解
- html下载文件和上传文件(图片)(java后台(HttpServlet))打开保存路径和选择文件录取+(乱码UTF-8)+包...
- 微信jssdk 图片上传 JAVA_微信JSSDK上传图片
- 软件测试之TCP、UPD协议详解
- Dynamics CRM 365零基础入门学习(五)权限管理
- 3.5 Python 实例4-文本进度条
- 自动化(二)使用Python打开网页
- Linux下海康威视工业相机的SDK二次开发
- 前端常见问题和技术解决方案
- 数据解读:都知道《隐秘的角落》火了,它到底怎么火的?