** 前端快速开发框架_Bootstrap [web基础day11] *

今日内容

1.bootstrap
（class里面的标记可以写多个,以空格隔开） 如
哈哈哈

Bootstrap:

	1.概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发更加快捷。
		* 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。
		* 好处：
				1.定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
				2.响应式布局
（css文件中带min的是压缩版，它去掉了回车换行等体积小，引用资源使用它，不带min的有换行，阅读源码使用它，当然两个一起引用就可以。）
	
	2.快速入门：
		1.下载Bootstrap
		2.在项目中将这三个文件夹复制
		3.创建html页面，引入必要的资源文件。
		4.将固定内容复制到head标签中
		5.把src的路径根据项目不同的路径进行修改。

		
		
		
		
		
		
		
		
		
		
		

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
* 步骤：
	1.定义容器。相当于之前的table
		* 容器分类
			* container：两边留白
			* container-fluid：每一种设备都是100%宽度
	2.定义行。相当于之前的tr   样式：row
	3.定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
		* 设备代号：
			1.xs：超小屏幕 手机 (<768px)：col-xs-12
			2.sm：小屏幕 平板  (≥768px)
			3.md 中等屏幕 桌面显示器 (≥992px)
			4.lg：大屏幕 大桌面显示器 (≥1200px)

		* 为什么要使用栅格系统？
			* 如果写固定宽度或者指定比例的宽度，当屏幕尺寸变化的时候都容易显示效果不好。
			* 可以动态的指定不同屏幕上，对应内容占用的比例。
	* 注意：
		1.一行中如果格子数目超过12，则超出部分则自动换行。
		2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3.如果设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

CSS样式和JS插件

1. 全局CSS样式：
	* 按钮：class="btn btn-default"
	* 图片:
	* img src="..."
	* 表格和表单
	* 
2. 具体示例：

	* 按钮：class="btn btn-default"
	* 图片：
		*  class="img-responsive"：图片在任意尺寸都占100%
		*  图片形状
			*  ：方形
			*   ： 圆形
			*   ：相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加：class="form-control" 
3. 组件：
	* 导航条
	* 分页条
4. 插件：
	* 轮播图

	* 注意：class="img-responsive"  使该图片变成响应式。
	* text-aglin:center  水平居中 （这个水平和下面的垂直居中是对div内容的修饰的。）
	* line-height:35px  垂直居中
	* class="thumbnail" 使div有一个相框包围的效果，类似于框框 
	* 
	*  
与
必须不在一个div中，应该前面的div嵌套后面的汉堡框框div，然后再在汉堡框框div里面嵌套div再写内容。

按钮，控件，图片响应式bootstrap的代码演示

helloword

栅格系统

CSS全局样式1

CSS全局样式2

上图

下图

导航条

    
    
    
    
    

    
    


    
    
    
    



    

        
        

            
            
                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
        
2
        
3
        
4
        
5
        

            
                »
            
        
    

轮播图

    
    
    
    
    

    
    


    
    
    
    



    
    

        

        

        

    

    
    

        

            
        
        

            
        
        

            
        

    

    
    
        
        Previous
    
    
        
        Next
    

表格全选

    
    
    

  





    
学生信息表
    

        

        
编号
        
姓名
        
性别
        
操作
    

    

        

        
1
        
令狐冲
        
男
        
删除
    

    

        

        
2
        
任我行
        
男
        
删除
    

    

        

        
3
        
岳不群
        
?
        
删除
    



    
    
    

常见事件

	
	
	
	    
	    
	
	    
	
	
	
	
	
	
	
	
	

	
	
	
	    --请选择--
	    北京
	    上海
	    西安
	
	
	
	
	

表单验证

    
    






    

        
新用户注册
        
USER REGISTER

    

    

        

            
            

                

                    

                        
用户名
                        

                            
                            
                        
                    

                    

                        
密码
                        

                            
                            
                        
                    

                    

                        
Email
                        

                    

                    

                        
姓名
                        

                    

                    

                        
手机号
                        

                    

                    

                        
性别
                        

                             男
                             女
                        
                    

                    

                        
出生日期
                        

                    

                    

                        
验证码
                        

                            
                        
                    


                    

                        

                    
                

            


        

    

    

        
已有账号?立即登录