bootstrap中CSS的学习.docxVIP

Bootstrap学习资料整理如何使用bootstrap任何疑问都可以咨询本人：148334733!DOCTYPE html htmlhead titlebootstrap template/titlemeta name=viewport content=width=device-width, initial-scale=1.0link rel=stylesheet href=/twitter-bootstrap/3.0.3/css/bootstrap.min.css/headbodyh1hello,world!/h1script src=/jquery/1.10.2/jquery.min.js/scriptscript src=/twitter-bootstrap/3.0.3/js/bootstrap.min.js/script/body /htmlMeta/viewport用来告诉移动客户端，在显示网页的时候仍然显示原大小。（禁止缩放）Bootstrap.min.css是压缩版的CSS样式Bootstrap.min.js是压缩版的JS样式Jquery.min.js是压缩版的JQ样式这就构成了一个最为简单最为常见的一个bootstrap结构和所需要的东西。实现居中用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。注意，由于设置了padding?和固定宽度，.container不能嵌套。div class=container ... /div栅格系统 “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。使用“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。类似Predefined grid classes like?.row?and?.col-xs-4?这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。通过研究案例，可以将这些原理应用到你的代码中。超小屏幕设备?手机 (768px)小屏幕设备?平板 (≥768px)中等屏幕设备?桌面 (≥992px)大屏幕设备?桌面 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，超过这些阈值将变为水平排列最大.container宽度None (自动)750px970px1170pxclass前缀.col-xs-.col-sm-.col-md-.col-lg-列数12最大列宽自动60px78px95px槽宽30px (每列左右均有15px)可嵌套Yes偏移（Offsets）Yes列排序Yes列偏移使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。记住：永远是12份。嵌套列为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。Level 1: .col-md-9Level 2: .col-md-6Level 2: .col-md-6divclass=rowdivclass=col-md-9 Level 1: .col-md-9 divclass=rowdivclass=col-md-6 Level 2: .col-md-6 /divdivclass=col-md-6 Level 2: .col-md-6/div/div/div/div列排序通过使用.col-md-push-*?和?.col-md-pull-*就可以很容易的改变列的顺序。.col-md-9 .col-md-push-3把九份内容放到三份去.col-md-3 .col-md-pull-9把三份的内容放到九份去divclass=rowdivclass=col-md-9 col-md-push-3.col-md-9 .col-md-push-3/divdivclass=col-md-3 col-md-pull-9.col-