bootstrap4

1. 容器

.container(固定宽度)或.container-fluid(全屏宽度)。栅格系统等控件都必须放置在容器内。

2. 栅格系统

1. 规则

1. 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
2. 使用行来创建水平的列组。
3. 内容需要放置在列中，并且只有列可以是行的直接子节点。
4. 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5. 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
6. 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
7. Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

–	超小设备<576px	平板>=576px	桌面显示器>=768px	大桌面显示器>=992px	超大桌面显示器>=1200px
容器最大宽度	None(auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数量和	12	12	12	12	12
间隙宽度	30px
可嵌套	Yes
列排序	Yes

2. 平板、桌面、大桌面显示器、超大桌面显示器

  

    

      
RUNOOB
    
    

      
菜鸟教程
    
  

3. 偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。例如：.offset-md-4 是把.col-md-4 往右移了四列格。

示例

  
.col-md-4
  
.col-md-4 .offset-md-4


  
.col-md-3 .offset-md-3
  
.col-md-3 .offset-md-3


  
.col-md-6 .offset-md-3

3. 小工具

1. 边框

使用border类可以添加或移除边框

.border、.border-0、.border-right-0、.border-right-0、.border-bottom-0、.border-left-0

2. 边框颜色

span class="border border-primary">

3. 边框颜色

4. 浮动

.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:

  左浮动
  右浮动

5. 响应式浮动

在大于小屏幕尺寸上右浮动

在大于中等屏幕尺寸上右浮动

在大于大屏幕尺寸上右浮动

在大于超大屏幕尺寸上右浮动

没有浮动

6. 对齐

.mx-auto	.mr-auto	.ml-auto
居中	左对齐	右对齐

7. 宽度

 
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
  
宽度 25%
  
宽度 50%
  
宽度 75%
  
宽度 100%
  
最大宽度 100%

8. 高度

元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
  

    
高度 25%
    
高度 50%
    
高度 75%
    
高度 100%
    
最大高度 100%
  

3. 字体

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

  
h1 Bootstrap 标题 (2.5rem = 40px)
  
h2 Bootstrap 标题 (2rem = 32px)
  
h3 Bootstrap 标题 (1.75rem = 28px)
  
h4 Bootstrap 标题 (1.5rem = 24px)
  
h5 Bootstrap 标题 (1.25rem = 20px)
  
h6 Bootstrap 标题 (1rem = 16px)
  
  
The blockquote element is used to present content from another source:
  

    
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    
From WWF's website
  
  
  

    
Coffee
    
- black hot drink
    
Milk
    
- white cold drink

标签	描述
h1-h6	定义了所有的 HTML 标题（h1 到 h6）的样式
Display标题类	Display 标题可以输出更大更粗的字体样式: .display-1, .display-2, .display-3, .display-4。
small	small 元素用于字号更小的颜色更浅的文本
mark	使用 mark 元素来高亮文本
abbr	在文本底部的一条虚线边框
blockquote	引述内容
dl	描述性的列表
code	标记代码
kbd	键盘快捷键标记
pre	多行文本

类名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更细的文本
.font-italic	斜体文本
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-left	左对齐
.text-center	居中
.text-right	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 abbr 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 (ul 和 ol 中)。 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.pre-scrollable	使 pre 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

4. 颜色

  
代表指定意义的文本颜色
  
柔和的文本。
  
重要的文本。
  
执行成功的文本。
  
代表一些提示信息的文本。
  
警告文本。
  
危险操作文本。
  
副标题。
  
深灰色文字。
  
浅灰色文本（白色背景上看不清楚）。
  
白色文本（白色背景上看不清楚）。
  
   
背景颜色
  
重要的背景颜色。
  
执行成功背景颜色。
  
信息提示背景颜色。
  
警告背景颜色
  
危险背景颜色。
  
副标题背景颜色。
  
深灰背景颜色。
  
浅灰背景颜色。

5. 导航

创建一个简单的水平导航栏，可以在 
 元素上添加 .nav类，在每个 
 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。

.nav-justified 类可以设置导航项齐行等宽显示。
.nav-pills 类可以将导航项设置成胶囊形状。
.flex-column 类用于创建垂直导航
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。 这个对导航栏无效


动态选项卡。选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，淡入效果可以在 .tab-pane 后添加 .fade类。胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"。


	

		

			Section 1
		
        

	        Section 2
		
	
	

		

			

				I'm in Section 1.
			
		
		

			

				Howdy, I'm in Section 2.
			
		
	

6. 导航栏

使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

.navbar-brand 类用于高亮显示品牌/Logo

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id。通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。


    
    Search
  
  
.fixed-top .fixed-bottom 类来实现导航栏的固定



  Navbar
  
    
  
  

    

      

        Link
      
      

        Link
      
      

        Link
      
    
    
  
  

7. 下拉菜单

  
    Dropdown button
  
  

    
Dropdown header 1
    Link 1
    Link 2
    Link 3
    

    
Dropdown header 1
    Link 1
  


.dropup  设置上拉 

8. 表单控件

1. input

类型有 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。

2. textarea

  评论:
  

3. 复选框(checkbox)

  
    Option 1
  


  
    Option 2
  


  
    Option 3
  

4. 单选框(Radio)

Option 1
Option 2
Option 3

5. select下拉菜单

.multiple 类 可以选择多个

  下拉菜单:
  
    1
    2
    3
    4
  

9. 表单

表单元素 input, textarea, 和 select elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

1. 堆叠式

  

    Email address:
    
  
  

    Password:
    
  
  

    
       Remember me
    
  
  Submit

2. 内联式

所有内联表单中的元素都是左对齐的。

注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在 元素上添加 .form-inline类。

  Email address:
  
  Password:
  
  

    
       Remember me
    
  
  Submit

10. 表格

类名	描述
.table	基础表格，没有任何效果
.table-striped	在tbody标签中添加条纹效果
.table-bordered	带边框，默认无边框
.table-hover	添加悬停效果
.table-dark	深灰色，可以是表格行的背景
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.thead-dark	为表头thead添加黑色背景
.thead-light	为表头thead添加灰色背景
.table-sm	较小的表格
.table-responsive	响应式表格，超过范围就会出现横向滚动条
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px(默认)
.table-responsive-xl	< 1200px

    

      

        
Firstname
        
Lastname
        
Email
      
    
    

      

        
John
        
Doe
        
[email protected]
      
      

        
July
        
Dooley
        
[email protected]
      
    

11. 分页

  
Previous
  
1
  
2
  
3
  
Next

.disabled 类可以设置分页链接不可点击
.active 类来高亮显示
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

12. 图片

• 圆角
• 椭圆
• 缩略图
• 对齐方式
• 响应式

13. 轮播幻灯片

 
  
  

    

    

    

  
 
  
  

    

      
      

        
第一张图片描述标题
        
描述文字!
      
    
    

      
      

        
第二张图片描述标题
        
描述文字!
      
    
    

      
      

        
第三张图片描述标题
        
描述文字!
      
    
  
 
  
  
    
  
  
    
  
 

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮
.slide	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。