第三章 Boostrap 框架解析--栅格系统案例笔记1

来源：互联网发布：网络销售培训课程编辑：程序博客网时间：2024/05/30 23:20

概述：

Boostrap框架主要是有动态CSS语言LESS编写，简单一句就是Boostrap类似spring 集大成者

知识小点：

Hack规则来解决浏览器兼容问题
CSS3书写规范遵循浏览器私有写法在前，标准写法在后
框架为先，细节次之（先整体布局，而局部调整）
CSS重设：浏览器解析规则不一样导致两种浏览器的效果不一样，这就是一切归零思想，从零开始，boostrap是针对性的重设

3.2 栅格系统：

简单来就是给网页大卸八块，不过要规则，整数倍，不能出现小数，这比较理想的状态

直接例子

<html><head><meta charset="UTF-8"><title>firstBootstrap</title><!-- 引入核心css文件 --><link href="../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css"><style type="text/css">.container-fluid{height:500px;}.row div{height:100px;}.col-md-1{border:solid red 1px;}.col-md-4{border:solid blue 1px;}.col-md-6{border:solid green 1px;}.col-md-8{border:solid black 1px;}</style></head><body><div class="container-fluid"><div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div></div><div class="row">  <div class="col-md-8">.col-md-8</div>  <div class="col-md-4">.col-md-4</div></div><div class="row">  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div></div><div class="row">  <div class="col-md-6">.col-md-6</div>  <div class="col-md-6">.col-md-6</div></div></div><!-- 引入jquery.js 因为它是基于jquery --><script src="http://code.jquery.com/jquery.js"></script><!-- 引入核心js --><script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></body></html>

效果：

总结：

1、注意在写自己代码之前先引入必要css和js包，防止忘了，迟迟没有效果

2、在栅格布局之前你要确定你要分成多少份这里是12份

3、container-fluid 表示流布局，也就是占满全屏，当前还有container，两边会有间距

4、row类样式表示一行，类似table一样。

5、col-md-1:col表示列，md（你第一反应是不是***，暂时理解占用或者合并）后面是数量，连起来，你要占几列

布局嵌套：

效果这样的：

总结：可以一直嵌套，但是注意就是这时候总份数和你刚开定义总份数要一致

阅读全文

0 0

第三章 Boostrap 框架解析--栅格系统案例 笔记1

第三章 Boostrap 框架解析--栅格系统案例笔记1