JavaWeb---BootStrap

目录

1.Bootstrap：

1.1概念：

1.2快速入门

1.2响应式布局

1.2.1实现：

1.2.2步骤：

1.3CSS样式和JS插件

1.3.1全局CSS样式：

1.3.2组件：

1.3.3插件：

---

1.Bootstrap：

1.1概念：

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架的定义:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局：同一套页面可以兼容不同分辨率的设备。

1.2快速入门

1. 下载Bootstrap：bootstrap-3.3.7-dist
2. 在项目中将这三个文件夹复制：

3. 创建html页面，引入必要的资源文件：

 

    
    
    
    
    

    
    


    
    
    
    


你好，世界！

1.2响应式布局

同一套页面可以兼容不同分辨率的设备。

1.2.1实现：

依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

1.2.2步骤：

1. 定义容器：相当于之前的table。
容器分类：
container：两边留白。
container-fluid：每一种设备都是100%宽度。
2. 定义行：相当于之前的tr，样式：row。
3. 定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号：
xs：超小屏幕 手机 (<768px)：col-xs-12
sm：小屏幕 平板 (≥768px)
md：中等屏幕 桌面显示器 (≥992px)
lg：大屏幕 大桌面显示器 (≥1200px)

注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行（不向下兼容）。

    
    
    
    
    

    
    


    
    
    
    
    


    
    

        
        

            
            
            
栅格
            
栅格
            
栅格

        

    

1.3CSS样式和JS插件

1.3.1全局CSS样式：

1.按钮：class="btn btn-default"
2.图片：class="img-responsive"：图片在任意尺寸都占100%
图片形状：
：方形
： 圆形
：相框

    
    
    
    
    

    
    


    
    
    
    
    



Link
Button







（首选项）Primary


（成功）Success


（一般信息）Info


（警告）Warning


（危险）Danger


（链接）Link

3.表格
table
table-bordered
table-hover

    
    
    
    
    

    
    


    
    
    
    
    



    


        

            
编号
            
姓名
            
年龄

        
        

            
001
            
张三
            
23
        
        

            
002
            
张三
            
23
        
        

            
003
            
张三
            
23
        

    




    

        

            Email address

           

            
           
        
        

            Password
            

                
            
        
        

            

                

                    
                         Remember me
                    
                
            
        
        

            

                Sign in
            
        
    

4.表单

给表单项添加：class="form-control"

    
    
    
    
    

    
    


    
    
    
    



    

        
        

            
            
                Toggle navigation
                
                
                
            
            首页
        

        
        

            

                
Link (current)
                
Link
                

                    Dropdown 
                    

                        
Action
                        
Another action
                        
Something else here
                        

                        
Separated link
                        

                        
One more separated link
                    
                
            
            

                
Link
                

                    Dropdown 
                    

                        
Action
                        
Another action
                        
Something else here
                        

                        
Separated link
                    
                
            
        

    

1.3.2组件：

导航条
分页条

    
    
    
    
    

    
    


    
    
    
    



    

        

            
                «
            
        
        
1
        
2
        
3
        
4
        
5
        

            
                »
            
        
    

1.3.3插件：

轮播图

    
    
    
    
    

    
    


    
    
    
    



    
    

        

        

        

    

    
    

        

            
        
        

            
        
        

            
        

    

    
    
        
        Previous
    
    
        
        Next