Bootstrap的常用CSS和布局组件的认知

row :行
col-*-*:  (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])
col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是111,表示把该列的左外边距(margin)增加*)
col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是111[列数])
排版
small:内联子标题
lead:引导主体副本
text-*:文本样式(*号可以为 
left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本] 
/primary/success/info/warning/danger 
/justify[自动换行]/nowrap[不换行] 
/lowercase[小写]/uppercase[大写]/capitalize[首字母大写])
list-inline:列表置于同一行

创建基本表单(垂直表单)的步骤 
1.向父 <form> 元素添加 role="form"2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 
3. 向所有的文本元素 <input><textarea><select> 添加 class .form-control。
创建水平表单的步骤 
1.向父 <form> 元素添加 class .form-horizontal。 
2.把标签和控件放在一个带有 class .form-group 的 <div> 中。 
3.向标签添加 class .control-label。
常见的表单控件主要是 input、textarea、checkbox、radio 和 select。 
input: 声明type有text、password、datetime、datetime-local、date、month、time、week、 
number、email、url、search、tel 和 color。
textarea: row决定高度
checkbox: 复选框
radio:单选框
checkbox-inline:内联的复选框和单选框
select:选择框
对父元素添加验证状态has-*:验证样式(*可以为warning/error/success)
按钮
btn:基本样式
btn-*:其他样式(*可以为default/primary/success/info/warning/danger 
/link[让按钮看起来像个链接] 
/lg/sm/xs/ 
block[块级按钮,拉伸至父元素100%的宽度]/active/disabled)
图片
img-*:图片样式(*可以为rounded[圆角6px] 
/circle[圆形] 
/thumbnail[添加内边距和一个灰色的边框]/responsive)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值