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

bootstarp 网格系统

时间:2017-11-10 20:29:53      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:input   元素   role   for   check   使用   大屏   系统   tar   

bootstrap  把 网页 均分为 12格,并分别对应 超小屏幕 xs    小屏幕 ms  中等屏幕 md  大屏幕 lg

结构

最外部 用类 container  包括 ,然后嵌套  类row,

超小 col-xs-1~12 分为12格。

小 col-sm -1~12  分为12格。

中等 col- md -1~12 分为12格。

大  col-lg-1~12 分为12格。

 

col-* 类 需全部位于 row 类内,当 每个col 类内部需要重新 划分12格时,需要嵌套row 来包含继续嵌套的 col 类。 

同一个div 可以添加多个不同的类, col-md-6  或者 col-sm-3  可以在屏幕大小改变的时候改变显示效果。

 

 

表格

table 类 table-* 类,决定 表格的主要样式。

table 

thead tr th

tbody tr th

 

表单

 form  添加 role=“form”

label  和 input  放在 form-group 类中。

内联表单

如果 表单 内部元素需要内联,则 添加 form-inline。

label  可以添家 类 sr-only  来实现隐藏。

 

 水平布局表单

form 添加类 form-horizontal。

每一行元素都放在form-group 中。

checkbox 复选框 需要放在 类checkbox 里边

input  添加类名 form-control

label 添加类名 control-label

  • 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio
  • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

按钮

a  button  input type=button  input type=submit  input type=reset

等 添加类名 .btn .btn-*  来 添加样式  btn-lg\btn-sm  、btn-block、来确定button的大小 ,也可以添加 col-md-*来确定button 的大小。

bootstarp 网格系统

标签:input   元素   role   for   check   使用   大屏   系统   tar   

原文地址:http://www.cnblogs.com/RoadAspenBK/p/7815873.html

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