A-艺凡
A-艺凡

BootStrap笔记参考（全）-优极限

目录

BootStrap

1.主要内容

2.BootStrap的安装和使用

2.1BootStrap介绍

2.2BootStrap特点

2.3下载与使用

3.布局容器和栅格网格系统

3.1布局容器

3.2栅格网格系统

4.常用样式

4.1排版

4.2 表单

4.3 缩略图

4.4 面板

5.BootStrap插件

5.1 导航

5.2分页导航

5.3 下拉菜单

5.4模态框

BootStrap

本文章为本人观看优极限视频整理的bootstrap笔记，仅供参考。

1.主要内容

BootStrap笔记参考（全）-优极限_第1张图片

 

2.BootStrap的安装和使用

2.1BootStrap介绍

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

中文网：Bootstrap中文网

BootStrap是一套现成的CSS样式集合（做的还是很好的）。是两个推特员工干出来的。

BootStrap是最受欢迎的HTML,CSS和JS框架，用于来发响应式布局，移动设备优先的web项目。

BootStrap建设的网站：界面清晰，简洁；要素排版利落大方。

BootStrap特别适合那种没有设计师团队（甚至没有前端的团队）。可以快速的做出一个网页。

2.2BootStrap特点

1.简洁，直观，强悍的前端开发框架，HTML，css,js工具集，让web 开发更速，简单。

2.基于HTML5,CSS3的BootStrap，具有大量的又热特性：友好的学习曲线，卓越的兼容性。响应式设计，12列格网，样式向导文档。

3.自定义JQUERY插件，完整的类库，BootStrap3基于Less，BootStrap4基于Sass的css预处理技术

4.BootStrap响应式布局设计，让一个网站可以兼容不同分辨路的设备。BootStrap响应式布局设计，给用户提供更好的视觉使用体验。

5.丰富的组件。

2.3下载与使用

1.下载：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

2.下载完成后

拷贝dis/css中的BootStrap.min.css到项目css中

拷贝dis/js中的BootStrap.min.js到项目js中

3.下载jQuery.js

jQuery

4.在html中模板为：



    
        
        
        
        
        
        
        
        
        Bootstrap基本的HTML模板
        
        
        
        
        
        
    
    
        
Hello,world!

        
        
        
        
        
    

​




    
        
        
        
​
        Bootstrap基本的HTML模板
​
        
​
    
    
        
Hello,world!

        
        
    

​

5.参考API：

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

3.布局容器和栅格网格系统

3.1布局容器

1, .container类用于固定宽度并支持响应式布局的容器。


---

2, .container-fluid类用于100%宽度，占据全部视口（viewport）的容器。


---

3.2栅格网格系统

BootStrap提供了一套响应式，移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列(column)的组合来床架页面布局，你的内容九可以放入这些人创建好的布局中。

栅格网格系统

Bootstrap栅格网格系统将容器平分为12列，列的总数加起来不能超过12，大于12则自动换到下一行。通过一系列的行（row）与列（column）的组合来创建页面布局。网格系统必须使用到css,数据行(.row)必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）。在行(.row)中可以添加列(.column)，即：行中有列！

    
    
        

            
            

                
灰色与青

                
灰色与青

列组合

列组合就是更改数字来合并列（列总数不能超过12，大于12，自动换到下一行），有点类似于表格的colspan属性

  
      
        

            

                
1

                
2

                
3

            

            

                
1

                
2

                
3

列偏移

有时候，我们不希望相邻的两个列紧靠在一起，让它们之间存在间隙，这就可以用列偏移（offset）来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*(星号代表要偏移的列组合数)，同时应该注意偏移的总数不能超过12

    
    
        

            

                
1

                
5

                
6

列排序

改变列的方向（改变左右浮动）并且设置浮动的距离

col-md-push-* ：往后push（右浮动） col-md-pull-* ：往前pull（左浮动）

     
   
        

            

                
列排序

                
左浮动

                
右浮动

列嵌套

在一个列中添加一个或者多个行容器，然后在这个行容器中插入列

    
		

			

				

					

						
1-1

						
1-2

						
1-3

					

				

				
2

				
3

4.常用样式

4.1排版

4.1.1标题

BootStrap和普通的HTML页面一样，定义标题都是使用标签

到

，只不过BootStrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题或使用.small。

h1.Bootstrap heading副标题


Bootstrap标题1副标题

4.1.2段落

段落是排版中另外一个重要元素之一。通过.lead来突出强调内容分(其作用就是增大文本字号，加粗文本，而且对行高和margin也左相应的处理。可以使用一下标签给文本左突出样式处理)。

:小字号

：加粗

:斜体

以后的你会感谢努力你

4.1.3强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下：

.text-muted:提示，使用浅灰色（#999）

.text-primary:主要，使用蓝色（#428bca）

.text-success:成功，使用浅绿色（#3c763d）

.text-info:通知信息，使用浅蓝色（#31708f）

.text-warning:警告，使用黄色（#8a6d3b）

.text-danger:危险，使用褐色（#a9442）

提示


主要


成功


通知信息


警告


危险

4.1.4对齐效果

在css中常常使用text-align来实现文本的对其风格的设置。

其中主要有四种风格：

左对齐，取值left;

居中对齐，取值center;

右对齐，取值right;

两端对齐，取值justify;

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐。

我居左

4.1.5列表

在HTML文档中，列表结构主要有三种：

  • 无序列表(

    • ....
    )

  • 有序列表(

    • ....
    )

  • 定义列表(

    ....
    ...
    )

4.1.5.1去点列表

class="list-unstyled"


    
    
  • 无序列表1
    • 
     
  • 无序列表2
    •

4.1.5.2内联列表

class="list-inline",把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内敛列表就是为制作水平导航而生。

    
	
  • 首页
    • 
    
  • java学院
    • 
     
  • 在线课堂
    •

4.1.5.3定义列表

在原有的基础上加入了 一些样式，使用样式class="dl-horizontal"制作水平定义列表：当标题宽度超过160px时，将会显示三个省略号。

4.1.6代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。在bootstrap主要提供了三种代码风格：

（1）使用>来显示单行内联代码

（2）使用

>来显示多行代码
 
  
样式：pre-scrollable(height,max-height高度固定为340px,超过存在滚动条)
 
  
（3）使用:来显示用户输入代码，如快捷键
 
  
4.1.6.1单行内联代码
 
  
this is a simple
 
  
4.1.6.2快捷键
 
  
使用ctrl+s保存
 
  
 
  
4.1.6.3多行块代码
 
  



	public class helloworld{
		public static void main(String[] args){
			-----------s
		}
	}
	
 
  
4.1.7表格
 
  
4.1.7.1表格样式
 
  
在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
 
  
下表样式可用于表格中：
 
  
 
    
    
 
     类 
     描述 
    
 
    
    
    
 
     .table 
     为任意  添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
 
     
    
 
     .table-striped 
     在 
 
     
    
 
     .table-bordered 
     为所有表格的单元格添加边框 
    
 
    
 
     .table-hover 
     在 
 
     
    
 
     .table-condensed 
     让表格更加紧凑 
    
 
    
 
     联合使用所有表格类 
      
    
 
    
  
 
  
4.1.7.2 tr，th，td样式
 
  
提供了五种不同的类名，每种类名控制了行的不同背景颜色
 
  
 
    
    
 
     类 
     描述 
    
 
    
    
    
 
     .active 
     将悬停的颜色应用在行或者单元格上 
    
 
    
 
     .success 
     表示成功的操作 
    
 
    
 
     .info 
     表示信息变化的操作 
    
 
    
 
     .warning 
     表示一个警告的操作 
    
 
    
 
     .danger 
     表示一个危险的操作 
    
 
    
  
 
  
4.2 表单
 
  
表单主要功能是用来与用户左交流的一个网页控件，良好的表单设计能够让王爷更好的沟通。表单中常见的元素主要包括：文本输入框，下拉选择框，单选按钮，复选按钮，文本域和按钮等。
 
  
4.2.1 表单控件
 
  
.form-control .input-lg(较大) .input-sm(较小)
 
  
4.2.1.1 输入框text
 
  
.form-control
 
  

	
	
	

 
  
4.2.1.2 下拉选择框select
 
  
多行选择设置：multiple="multiple"
 
  

	

 
  
4.2.1.3文本域
 
  
.form-control 表单元素的样式
 
  
4.2.1.4 复选框 checkbox
 
  
垂直显示：.checkbox
 
  
水平显示： .checkbox-inline
 
  
hiHiHiH'zHih垂直HiHiH'zHihuHiHii
		

			

		

			
		

		

			
		

			

		

//水平	


			

				
				
				

		
 
  
 
  
4.2.1.5 单选框 radio
 
  
垂直显示： .radio
 
  
水平显示：.radio-inline
 
  

			

				

					
				

			

				
			

			

		
 
  
 
  
4.2.1.6 按钮
 
  
（1）使用实现
 
  
基础样式：btn
 
  
 
  
滑稽样式：btn-primary btn-info btn-success btn-danger btn-link btn-default
 
  






 
  
(2)多标签支持：使用a div等制作按钮
 
  
a标签按钮
span标签按钮
 
  
(3)按钮大小
 
  
使用.btn-lg .btn-sm .btn-xs 就可以获得不同尺寸的按钮。
 
  
 
  
(4)按钮禁用
 
  
方法1：在标签中添加disabled属性
 
  
 
  
方法2：在元素标签中添加类名“disabled”
 
  
 
  
在class属性中添加disabled知识样式上禁用了，并不是真正的禁用 了此按钮/
 
  
4.2.2 表单布局
 
  
基本的表单结构是bootstrap自带的，个别的表单控件自动接收一些布局样式。下面列出了创建基本表单的步骤：
 
  
     
   
  •  
    向父
    元素添加role="form".
     
    •  
   
  •  
    把标签和控件放在一个带有class.form-group的
    中。这是获取最佳间距所必须的
     
    •  
   
  •  
    向所有的本文元素,