响应式布局框架bootstrap（世界上最流⾏的css框架）
bootstrap缺点：css太重，牵⼀发⽽动全⾝
bootstrap框架的栅格布局原理：flex布局
栅格布局实现原理
•把⽹页总宽度平分为12分，开发⼈员可以⾃由按分组合，以便开发出简洁⽅便的程序
•仅仅通过定义容器⼤⼩、平分12分，再调整内外边距，最后结合媒体查询，就制作出强⼤的响应式栅格系统
•栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建页⾯布局，你的内容就可以放⼊这些创建好的布局中。
.container拥有15px的左右内边距
.row拥有-15px的左右外边距，使得其刚好与.container的内边距抵消，使.row内的元素⾄左显⽰。
.col-md-都拥有15px的左右内边距，使得已经嵌套的.col-md-元素由于已经确定了长度，便可以充当.contai
ner。实现栅格系统的扩展。
bootstrap模态框
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最⼩和最实⽤的功能集。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演⽰模态框</button>
见博客 wwwblogs/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实现三列布局为啥⽤css框架？
1.可以提⾼开发效率(给不会css的⼈⽤的)
2.框架代码结构清晰，避免混乱和冲突，可以去学习借鉴
3.更好的团队合作
4.写的代码少(写的通⽤性的代码⽐较少但是业务代码⼀样，但是事实上整个⽹站的⼤⼩会变⼤)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。