学习使用bootstarp基本控件（table、form、button）_javascript技巧

 
 
 
 
 
标题一
 
标题二
 
标题三
 
 
 
1
 
2
 
3
 
 
 
4
 
5
 
6
 
 
 
 
 

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

2. 表单form, 有如个几种样式定义

lable与控件要用form-group类型的div包起来，默认表单如下

 
 
 Email address  
 
 Password  
 
   Check me out  
 Submit 
 

内联表单，为label指定sr-only类别，可隐藏掉标签，但必须 不可省略lable.

 
 
 Email address  
 
 Password  
 
   Check me out  
 Submit 
 

水平类型的表单，要为lable与标签组指定长度， 采用栅格系统的布局方式。 label右对齐，标签组左对齐。

 
 
 Email address 
  
 
 
 Password 
  
 
 
   Check me out  
 Submit 
 

form表单验证，bootstrap3支持表单的自定义验证。 加入req uired表示表单必填，node.setCustomValidity可以设置表单的自定义验证

 
 
 Email address 
  
 
 
 Password 
  
 
 
  Password2 
  
 
 
   Check me out  
 Submit 
 
 

3. button的样式

使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮， 给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素，、或元素添加按钮class。

Default Primary Success Info Warning Danger 链接 Link Button

以上就是本文的全部内容，希望对大家的学习有所帮助。