Bootstrap

Bootstrap

一、Bootstrap概述

Bootstrap:是一个基于jquery以及css html5的前端框架，具有很好的自适应性，可以很方便的处理响应式布局

Bootstrap中文网

二、Bootstrap使用方式

三、网格系统

栅格系统：Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。

• 使用“行（row）”在水平方向创建一组“列（column）”。

• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。

• 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

• 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

最外层的容器一般的样式.container,但是也可以使用.container-fluid:

.container的宽度会根据屏幕宽度进行调整，两边有留白。

.container-fluid宽度始终为100%

            
    
                
        
1
        
2
        
3
        
3
    
            
    
                
        
1
    
        

四、常用组件

请学习的时候按照以下引导顺序查看帮助文档

1. 按钮

   hello
   hello
   hello
   hello
   

2. 小图标

   需要将fonts文件夹导入到项目中

   

3. 表格

4. 表单

   • 垂直表单

   • 内联表单

   • 水平表单

5. 折叠菜单

   
       
          
       
           
           
              
               
                   
                                       系统管理                
               
           
           
           
   
               
                   
                   
                       
                       
                           权限管理                    
                       
                           用户管理                    
                       
                           角色管理                    
    
                   
               
               
           
           
       
       
       
       
   
           
    
               
    
                                       基础数据管理                
               
           
           
           
           
   
               
                   
                   
                       
                       
                           商品管理                    
                       
                           商品类型管理                    
    
                   
              
               
           
           
       
       
   

6. 分页

       
       
   «
       
       
   1
       
       
   2
       
       
   3
       
       
   4
       
       
   5
       
       
   »