Bootstrap学习笔记（一）引入环境/布局容器/栅格系统
来源：互联网 发布：linux vim安装包下载 编辑：程序博客网 时间：2024/05/22 00:33
什么是Bootstrap
Bootstrp是一个目前很流行的前端框架，是基于html5的，当然常用的html与jsp文件也是适用的，它主要提供了对常用标签的样式设定，使你对排版布局更加的方便与美观，它是以移动设备优先，对IE8及以下版本的支持并不友好。
引入环境
Bootstrap的基础文件有三个，分别是bootstrap.css、jquery.js、bootstrap.js；
环境引入分两种，一种是本地引入，另一种是网络引入。
1. 本地引入
首先在官网http://v3.bootcss.com下载，当前是3.3.7版本，文档结构图如下，其中用到的文件就只有bootstrap.min.css与bootstrap.min.js两个文件，当然还需要下载别一个文件即jquery.min.js，可在官网的下载页面找到，链接为https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js，用浏览器打开保存为jquery.min.js然后保存到js文件里面就可以了。
bootstrap.css与bootstrap.min.css的区别，后者是前者的压缩版本，一般只使用压缩版本即可。
新建一个demo01.html文件然后引入3个文件 ，环境就算配制好了。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <title>Document</title> </head> <body> </body></html>这里要注意的是，加上<meta name="viewport" content="width=device-width, initial-scale=1.0">这句是移动设备优先的意思，是html文件自带的；而jquery.min.js文件要写在bootstrap.min.js之前。
2. 网络引入
不需要下载bootstrap文件，直接在下载界面找到相应的链接粘贴到html文件头部即可。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Document</title> </head> <body> </body></html>布局容器
容器分两种，分别是container，container-fluid，容器之间不能嵌套，支付响应式布局。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <title>Document</title> </head> <body style="background: #aaa;"> <div class="container" style="background: yellow;"> 这是一个container容器，宽度为1170 </div> <div class="container-fluid" style="background: green;"> 这是一个container-fluid容器，宽度为100% </div> </body></html>图像显示如下
之后再插入代码时不再加入，
html头部引入的bootstrap环境，默认是全是引入的。
栅格系统
这个是bootstrap框架的经典部分，用作于界面的布局。
基本属性
- 栅格系统分成不同的行(
row)，第行分成12个基数列(col-xx-num)； - 相临的基数列可以组合成一个组合列，随需求而定；
- 如果当前行放不下组合列，会别起一行；
- 每两个相临的列之间的间隔是30px，即左右各50px。
因为是响应是布局，所以会根据设备的不同而适配不同的列名
不同col-md-x的显示
<div class="container"> <div class="row"> <div class="col-md-2">2</div> <div class="col-md-2">2</div> <div class="col-md-2">2</div> <div class="col-md-2">2</div> <div class="col-md-2">2</div> <div class="col-md-2">2</div> </div> <div class="row"> <div class="col-md-3">3</div> <div class="col-md-3">3</div> <div class="col-md-3">3</div> <div class="col-md-3">3</div> </div> <div class="row"> <div class="col-md-4">4</div> <div class="col-md-4">4</div> <div class="col-md-4">4</div> </div> <div class="row"> <div class="col-md-6">6</div> <div class="col-md-6">6</div> </div> </div>
为了能看清col-md-，就加了样式如下
<style type="text/css"> div[class^="col-"]{ border: 1px solid blue; }</style>响应式布局实例
<div class="container"> <div class="row"> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列1</div> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列2</div> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列3</div> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列4</div> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列5</div> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列6</div> </row></div>当缩小浏览器容器时，截图如下 col-xs-2时，显示6列； 
col-sm-3时，显示4列 
col-md-4时，显示3列 
col-lg-6时，显示4列
列偏移
col-md-offset-*整体向右偏移，是指当前与其右边的列组一起偏移；col-md-pull-*单体向左偏移；col-md-push-*单体向右偏移；
直接看代码与图
<div class="container" style="background: #ddd;"> <div style="height: 30px;"></div> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1"> </div> </div> <div style="height: 4px;"></div> <div class="row"> <div class="col-md-2">1-2</div> <div class="col-md-4">3-6</div> </div> <div style="height: 4px;"></div> <div class="row"> <div class="col-md-2 col-lg-offset-2">整体向右偏移2格</div> <div class="col-md-4">整体向右偏移2格</div> </div> <div style="height: 4px;"></div> <div class="row"> <div class="col-md-2">不变</div> <div class="col-md-4 col-md-offset-2">向右偏移2格</div> </div> <div style="height: 4px;"></div> <div class="row"> <div class="col-md-2 col-md-push-4">向右偏移4格</div> <div class="col-md-4 col-md-pull-2">向左偏移2格</div> </div> </div>
列嵌套
列嵌套就如在表格一样，在一个<td>里面加个<table>，看代码就能明白；就是在一个组合列内部加入一个内嵌的组合列。
<body style="background: #eee;"> <div class="container"> <div style="height: 30px"></div> <div class="row" > <div class="col-md-2" style="height: 40px;">A</div> <div class="col-md-4" style="height: 40px;">B <div class="col-md-2">1</div> <div class="col-md-2">2</div> <div class="col-md-2">3</div> <div class="col-md-2">4</div> </div> </div> </div></body>
阅读全文
1 0
- Bootstrap学习笔记（一）引入环境/布局容器/栅格系统
- Bootstrap栅格系统（布局）
- bootstrap栅格系统学习笔记
- bootstrap栅格系统布局
- 深入理解BootStrap-- 栅格系统（布局）
- bootstrap栅格布局笔记（1）
- 学习笔记4-bootstrap的栅格系统
- 学习笔记4-bootstrap的栅格系统
- Bootstrap笔记 栅格系统
- Bootstrap 栅格系统 笔记
- Bootstrap-栅格系统自适应布局
- Bootstrap-栅格系统自适应布局
- Bootstrap中的栅格布局系统
- ①bootstrap学习笔记一下载安装，栅格，流式，布局，样式
- ①bootstrap学习笔记一下载安装，栅格，流式，布局，样式
- BootStrap ：环境搭建；布局容器；视口：在移动设备上使用，用于比例缩小视口内容；栅格系统；Col-屏幕尺寸-所占栅格数
- 深入理解BootStrap Item7 -- 栅格系统（布局）
- 深入理解BootStrap-- 栅格系统（布局）7
- Lync server 2013 部署开发常用工具下载
- 4. Object有哪些公用方法？
- Git常用指令集合
- 如何将域名部署到Tomcat中，用域名访问服务器
- iOS 遇到后台返回字符串中带有\n
- Bootstrap学习笔记（一）引入环境/布局容器/栅格系统
- Noip2017普及组第二题
- 输出三角数
- Unity5新手版介绍
- 函数的调用过程——栈帧
- hdu_2001 计算两点间的距离
- Android RecyclerView通用Adapter封装
- XRecyclerView适配器
- windows-右键添加cmd
