bootstarp 网格系统

Posted RoadAspen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstarp 网格系统相关的知识,希望对你有一定的参考价值。

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 网格系统的主要内容,如果未能解决你的问题,请参考以下文章

html 了解CSS网格系统//本文的基本网格系统//了解SitePoint上的CSS网格系统:http://www.sitepoin

响应式网页设计网格系统实现

Bootstrap学习笔记 网格系统

Bootstrap网格系统

css [简单响应网格]简单响应网格系统#css #grid #responsive

基础网格系统不生效