bootstrap学习笔记心得1

Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。

Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多JQuery插件：莫泰局昂、标签页、滚动条、弹出框等。

有关bootstrap的下载和文档可到bootstrap中文网：www.bootcss.com查看。

那么使用bootstrap的优势在哪里？第一、利于开发响应式网站，解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。

本篇文章将总结常用组件及其属性。

1.1栅格系统

1、栅格系统是一种行和列构成的一种布局。随着，屏幕分辨率的变大，最多可展示12个列。

PC端：

PAD端：

手机终端：

2、栅格参数：

col-lg-*:(屏幕>=1200px) PC

col-md-*:（992px-1200px）

col-sm-*:（768px-992px）小平板

col-xs-*:（小于768px）手机

3.代码示例：

	

		

			

				
				
靠谱研究所
				
我们的口号是：靠谱、有趣、有料
			
		
		

			

				
				
靠谱研究所
				
我们的口号是：靠谱、有趣、有料
			
		
	
	
  

1.2辅助类

1.文本颜色：

	    
text-primary靠谱研究所
		
text-success靠谱研究所
		
text-warning靠谱研究所
		
text-danger靠谱研究所
		
text-info靠谱研究所
		
text-muted靠谱研究所

2、背景颜色：

	    
text-primary靠谱研究所
		
text-success靠谱研究所
		
text-warning靠谱研究所
		
text-danger靠谱研究所
		
text-info靠谱研究所
		
text-muted靠谱研究所

3、关闭按钮&三角图标：

	    
		×
		
		

4、快速浮动：

左浮动：pull-left 右浮动：pull-right 清除浮动：clearfix

浮动会将块元素转换成行内元素

这是左边的内容
    
这是右边的内容

  5、块元素居中、文字居中：

	
	
	
块元素水平居中
	
	
块元素垂直居中

1.3表格

1.表格颜色：active,warning,danger,info,danger

2.鼠标悬停效果：table-hover

3.带边框表格：table-bordered

4.各行换色：table-striped

			

				

					
姓名：
					
性别：
					
年龄：
				
			
			

				

					
张三
					
男
					
23
				
				

					
张三
					
男
					
23
				
				

					
张三
					
男
					
23
				
			
		

1.4列表：

class属性：ul:list-group li:list-group-item 徽章：span:badge                                                                                              列表项颜色：list-group-item-(success/warning/danger)

     

		

		靠谱研究所
		10
		
		
IT研究所
		
美食研究所
		
美妆研究所
	

1.5表单：

表单分组：form-group 表单项：(input/span/textarea):form-control

	

			
靠谱研究所后台管理系统
			

				用户名
				
				
			
			

				密码
				
				
			
			

				
					请记住我
				
			
			提交