响应式布局框架bootstrap（世界上最流行的css框架）

最新推荐文章于 2021-08-07 09:21:42 发布

转载最新推荐文章于 2021-08-07 09:21:42 发布 · 224 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaosijia----1234/p/9513245.html

本文详细介绍了Bootstrap框架的栅格布局原理及其实现方法，包括如何通过定义容器大小、平分12分并调整内外边距来制作响应式栅格系统。此外，还探讨了为何使用CSS框架的优势。

bootstrap缺点：css太重，牵一发而动全身

bootstrap框架的栅格布局原理：flex布局

栅格布局实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

.container拥有15px的左右内边距

.row拥有-15px的左右外边距，使得其刚好与.container的内边距抵消，使.row内的元素至左显示。

.col-md-都拥有15px的左右内边距，使得已经嵌套的.col-md-元素由于已经确定了长度，便可以充当.container。实现栅格系统的扩展。

bootstrap模态框

bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
见博客 http://www.cnblogs.com/zhaosijia----1234/p/8946882.html

bootstrap栅格的工作原理

•“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
•通过“行（row）”在水平方向创建一组“列（column）”。
•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
•类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
•通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）
比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。

为啥用css框架？

1.可以提高开发效率(给不会css的人用的)
2.框架代码结构清晰,避免混乱和冲突,可以去学习借鉴
3.更好的团队合作
4.写的代码少(写的通用性的代码比较少但是业务代码一样，但是事实上整个网站的大小会变大)

转载于:https://www.cnblogs.com/zhaosijia----1234/p/9513245.html