BootStrap的学习

1、初识BootStrap

别人写好的：JavaScript、CSS代码，我们后期的项目就可以在他的基础上进行开发。

1）下载地址：https://v3.bootcss.com/css/

https://v3.bootcss.com/getting-started/

解压缩

2）引入

把解压后的文件夹放入项目》编辑HTML文件如下：

    
    
    


// 注意引用bootstrap之前要引用jQuery
    
    

3）使用

　　看官方文档，示例。https://v3.bootcss.com/css/    》 全局CSS样式

　　拿来直接用&改。

    
    
    



// 前后效果一样
跳转
    
    

2、BootStrap容器

1）container，容器居中

    
    
    



    
asdfghjkl

    
    

2）container-fluid 平铺

    
    
    



    
asdfghjkl

    
    

导航条案例

 3、BootStrap栅格：使用：lg 左9右3的页面布局（页面>1200px，否则会出现叠加）

    

        
左边
        
右边
    

使用md做出如上相同效果：md页面>992px，否则会出现叠加。

    

        
左边
        
右边
    

使用sm做出如上相同效果:md页面>768px，否则会出现叠加。

    

        
左边
        
右边
    

使用xs做出如上相同效果:自适应放缩，不受页面限制。

    

        
左边
        
右边
    

补充：占位offset

        
右边

4、BootStrap面板

    
    
    




    

        


        
        

            

                

                    
                    最新评论
                
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
24小时排行榜
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
                
Panel heading
                

                    
...
                

                
                

                    
Cras justo odio
                    
Dapibus ac facilisis in
                    
Morbi leo risus
                    
Porta ac consectetur ac
                    
Vestibulum at eros
                
            
        
    

5、BootStrap按钮和按钮组

    
    
    




    

        

            

                添加
                导入
                Right
            
            

                

                

                    
#
                    
First Name
                    
Last Name
                    
操作
                
                
                

                

                    
1
                    
Mark
                    
Otto
                    

                        修改
                        删除
                    
                
                

                    
2
                    
Jacob
                    
Thornton
                    

                        修改
                        删除
                    
                
                

                    
3
                    
Larry
                    
the Bird
                    

                        修改
                        删除
                    
                
                
            
        
        

            

                

                    
                    最新评论
                
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
24小时排行榜
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
                
Panel heading
                

                    
...
                

                
                

                    
Cras justo odio
                    
Dapibus ac facilisis in
                    
Morbi leo risus
                    
Porta ac consectetur ac
                    
Vestibulum at eros
                
            
        
    

6、BootStrap的分页

    
    
    




    

        

            

                添加
                导入
                Right
            
            

                

                

                    
#
                    
First Name
                    
Last Name
                    
操作
                
                
                

                

                    
1
                    
Mark
                    
Otto
                    

                        修改
                        删除
                    
                
                

                    
2
                    
Jacob
                    
Thornton
                    

                        修改
                        删除
                    
                
                

                    
3
                    
Larry
                    
the Bird
                    

                        修改
                        删除
                    
                
                
            
            

                
?
                
1 (current)
                
2
                
3
                
4
                
5
                
?
            
        
        

            

                

                    
                    最新评论
                
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
24小时排行榜
                

                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                    
asdfghjk
                
            
            

                
                
Panel heading
                

                    
...
                

                
                

                    
Cras justo odio
                    
Dapibus ac facilisis in
                    
Morbi leo risus
                    
Porta ac consectetur ac
                    
Vestibulum at eros