Home > Article > Web Front-end > 学习使用bootstarp基本控件（table、form、button）_javascript技巧

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

WBOYOriginal: 2016-05-16 15:05:571847browse

bootstrap为我们定义了简洁易用的样式，我们只需要很少的样式指定，就可以完成简约优雅的页面展示。
本篇主要介绍以下几个基本控件：
1. table
2. form
3. button

1. 表格（table）依旧使用

来表现表格。有如下的类来控制table的属性， table样式默认会占满父容器

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

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

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

 
    
      
        Email address
        
      
      
        Password
        
      
      
          Check me out

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

  
    
      
        Email address
        
      
      
        Password
        
      
      
          Check me out

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

 
    
      
          Email
            address
        
          
        
      
      
          Password
        
          
        
      
      
          Check me out

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


    
      
        Email
          address
        
          
        
      
      
        Password
        
          
        
      

         Password2
        
          
        
      
      
          Check me out

3. button的样式

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS代码防止SQL注入的方法(超简单)_javascript技巧Next article：如何高效率去掉js数组中的重复项

See more

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

Related articles