bootstarp v3 学习简记

1、快速设置浮动
通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。

 

<div class="pull-left">...</div><div class="pull-right">...</div>

// Classes.pull-left {float: left !important;}.pull-right {float: right !important;}

2、通过添加.lead可以让段落突出显示。

<p class="lead">...</p>

 

 

3、栅格选项
超小屏幕设备 手机 (<768px) .col-xs-
排列方式：总是水平排列

小屏幕设备 平板 (≥768px) .col-sm-
中等屏幕设备 桌面 (≥992px) .col-md-
大屏幕设备 桌面 (≥1200px) .col-lg-
排列方式：开始是堆叠在一起的，超过这些阈值将变为水平排列

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。
对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的class吧

4、Bootstrap是移动设备优先的。
为了确保适当的绘制和触屏缩放，需要在

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

5、响应式图片
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

 

6、图片占位符
浅灰色背景，可加文字的图片占位符：http://placekitten.com/
图片占位符纯色背景无文字版代码：http://fpoimg.com/
其他：http://placehold.it/是一个简单方便的占位图片生成工具，用户通过直接在url里加入图片宽、高数值参数即可生成你想要的占位图片。

7、漂亮的bootstarp模板，参考模板学习，永远是一个好方法。
收费的模板站点：http://wrapbootstrap.com/ 不贵，不少好东西。
下面是免费的：
Bootstrap Editor and Builder：http://www.bootply.com/
Free themes for Bootstrap：http://bootswatch.com/
一个较为全面的，mPurpose – Free multipurpose Twitter Bootstrap 3 template
http://www.bootstrapzero.com/bootstrap-template/mpurpose