BootStrap框架

一、BootStrap介绍

1.简介
BootStrap是当前比较流行的CSS框架之一，他是Twitter推出的一个用于前端开发的开源工具包。
2.为什么要学习BootStrap
(1)企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多
(2)本课程后面的web界面为了统一将使用bootstrap作为统一的前端框架

(3)有利于学习和理解其它框架

eg：第一个BootStrap程序

	
	
	


	

	

	
col-md-3
	
col-md-9
	

二 、BootStrap基本样式-栅格

12列的布局介绍

1、栅格基本使用方式：

使用.container（ 1170 px）或container-fluid包裹
列应当包含在行”row”中
列的基本格式： (col-屏幕大小-数字）

    

     

col-3

     

col-9

     

 

2、栅格基本使用方式（二）

(1)当一列多于12列时会自动换行

(2)列偏移

 .col-md-offset-n：向右偏移N列

(3)嵌套列

在一个col下再使用row产生一个或多个行

3、排版

(1)基本HTML标签样式

h1-h6、p、strong、mark、del

(2)文本对齐

text-left、text-right、text-center、text-nowrap（文本不换行）

(3)列表

list-unstyled：去掉标记

list-inline：列表项显示在一行

三、表格样式

1、Table:基本样式
table-striped：条纹表格
table-bordered：带边框表格
table-hover：鼠标悬停
table-condensed：紧缩表格
2、状态类，可以给单元格设置颜色：
.active
.success
.info
.warning
.danger
3、响应式表格：table-responsive

四、表单样式

1、表单基本样式
 Form-control:表单元素的宽度属性为100%
 input-group：表单分组（使用表单分组时无需添加row)
 checkbox-inline：在一行显示checkbox
 Radio-inline:在一行显示radio
 Disabled:禁用
 Readonly:只读
 .has-warning、.has-error 或 .has-success：表单校验
 添加图标： has-feedback
 控件尺寸：input-lg ,input-sm
 表单其他样式：
 Form-inline：内联表单

 form-horizontal: 水平标签

2、按钮
Btn:显示为一个按钮，用于button元素或其它元素
颜色： btn-default， btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
尺寸： btn-lg，btn-sm,btn-xs,btn-block
Disabled:禁用
图片
响应式图片： img-responsive
图片形状： img-rounded， img-circle， img-thumbnail

	
	
    
    
	





	

	

	
学生
	
姓名
	
年龄
	
成绩
	
	

	
aa
	
11
	
aa
	
11
	
	

	
aa
	
11
	
aa
	
11
	
	

	
aa
	
11
	
aa
	
11
	
	




姓名



密码:


保存

五、辅助工具

1、颜色

(1)文字颜色
   text-muted
  text-primary
  text-success
  text-info
  text-warning
  text-danger
(2)背景颜色
  bg-muted
  bg-primary
  bg-success
  bg-info
  bg-warning
  bg-danger

2、位置

(1)浮动
  pull-xx: right:xxx%
  push-xx：left: xxx%
  clearfix
(2)内容居中
  center-block
(3)显示或隐藏
  show
  hidden
(4)响应式工具
  visible-xs-*  可见
  hidden-xs      隐藏

六、BootStrap组件

1、下拉菜单

  dropdown

  dropdown-menu

 dropdown-header：不可点击的菜单

	
	
    
    
    



	


	

	

	

	

        下拉菜单
         
 			

				
菜单1
				
菜单2
				
菜单3
 			
	
	
	

	

	Left
	Middle
	Right
	
	
	
	

2、按钮组

button-group

btn-group-vertical：垂直排列

3、导航

nav

nav-tabs：标签式导航

nav-pills：胶囊式导航

4、导航条
navbar
navbar-brand：品牌图标
navbar-btn：导航按钮
navbar-text:导航文本
navbar-left/navbar-right:元素居左/居右
navbar-fixed-top：固定在顶部
navbar-fixed-bottom：固定在底部
navbar-default：反色

	
	
    
    
    



	


	

	  

	   

	       网站名称
	       
	       

              
首页
               
公司简介
               

                  
                  产品列表
                  
                  

                    
产品1
                    
产品2
                  
              
	       
	       

	         
	         搜素
	       
	    

	      
登录
	    
	     
	  

分页
 Pagination：
路径导航
 Breadcrumb：
标签
  Label
  label-default
  label-primary
  label-success
  label-info
  label-warning
  label-danger
徽章
  badge
巨幕
  jumbotron ：
缩略图
  thumbnail ：
列表
  list-group：
  list-group-item:列表项
  list-group-item-heading
  list-group-item-text
面板
  Panel
  panel-heading
  panel-title
  panel-body：
  panel-footer
  panel-primary
  panel-success
  panel-info
  panel-warning
  panel-danger
  Panel和其它元素的组合

七、JavaScript插件

模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
手风琴组件
图片轮播组件

1、模态框

data方式调用
Launch modal    
js方式调用
$('#myModal').modal(options)

2、标签页

data方式调用

Home

    
js方式调用
$('#someTab').tab('show')
事件
show.bs.tab  显示前触发（2）
shown.bs.tab 显示后触发（4）
hide.bs.tab 隐藏前触发（1）
hidden.bs.tab 隐藏后触发（3）

3、轮播图

data方式调用

    
js方式调用
$('.carousel').carousel()