码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap笔记

时间:2014-11-09 15:17:35      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   响应式   

1

Bootstrap是移动设备优先的。

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。

使用.col-md-offset-*可以将列偏移到右侧。

2.

bootstrap常用栅栏格式写法:

<div class="row">

         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >

         </div>

</div>

3.

Bootstrap将全局font-size设置为14pxline-height1.428。这些属性直接赋给<body>和所有段落元素。

4.

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。5

5.

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control<input><textarea><select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

6.

为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。

7.

通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。

8.

通过将.checkbox-inline  .radio-inline应用到一系列的checkboxradio控件上,可以使这些控件排列在一行。

9.

添加.has-warning.has-error.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

10.

<button type="button" class="btn btn-link">Link</button类似于a的链接

<div class="center-block">...</div内容区域居中

如果是用于对齐导航条上的组件,请务必使用.navbar-left  .navbar-right

<button type="button" class="close" aria-hidden="true">×</button>

关闭按钮

<div class="jumbotron">大屏幕介绍



bootstrap笔记

标签:bootstrap   响应式   

原文地址:http://blog.csdn.net/hzk1562110692/article/details/40713067

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!