bootstarp 网格系统

Posted 2020-10-14 RoadAspen

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 的大小。