BootStrap4 入门教程学习摘要笔记

BootStrap4 简介

Bootstrap4 是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集，与之前的版本相比，拥有更强大的功能。

利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

自定义选项

可以在 _variables.scss 文件找到这些变量并自定义这些变量。

弹性盒Flexbox

• 在父元素里面内容的简单的垂直对齐。
• 通过使用媒体查询，可以简单的根据设备和屏幕分辨率来对内容重新排序。
• 只用 CSS 在网格系统中实现等高列的布局。

页面创建

  
     
    //width=device-width 表示宽度是设备屏幕的宽度。
    //initial-scale=1 表示初始的缩放比例。
	//shrink-to-fit=no 自动适应手机屏幕的宽度。
    
  

容器类

• container 类用于固定宽度并支持响应式布局的容器。（两边有留白）
• container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

网格系统

拥有一个强大的移动优先的网格系统，使用该系统可以用来创建各种形状和尺寸的布局，基于12列。

网格类

Bootstrap 4 网格系统有以下 5 个类：

• col- 针对所有设备
• col-sm- 平板 - 屏幕宽度等于或大于 576px
• col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则如下：

排版

Bootstrap4 默认设置

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

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

display、abbr、mark、small、blockquote、dl、dt、dd、code、kbd、pre、

颜色设置

文字颜色

.text-muted：柔和
.text-primary：主要
.text-success：绿色
.text-info：淡蓝色
.text-warning：黄色
.text-danger：红色
.text-secondary：和柔和好像
.text-white：白色
.text-dark：深灰
.text-light：浅灰

背景颜色

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light（颜色和文字颜色对应）
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text- 类一起使用*

表格设置

感觉和原先的BootStrap没什么区别…

.table,.table-stripe,.table-bordered,.table-hover,.table-dark,.table-primary,.table-success,.table-warning,.table-danger,.table-info,.table-active,.table-secondary,.table-light,.table-dark,.thead-dark,.thead-light,table-sm,.table-responsive-*。

图片设置

图片形状

img-rounded：让图片显示圆角效果
img-circle：设置椭圆形图片
img-thumbnail：用于设置图片缩略图(图片有边框)

图片对齐

使用 .float-right 类来设置图片右对齐
使用 .float-left 类设置图片左对齐

响应式图片

在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、height: auto;

超大屏幕

.jumbotron 类。
想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现。

信息提示框

.alert 类。

• .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现颜色的变化。
• 提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。
• 在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。
• × (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”。
• .fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果。

按钮

按钮类可用于 , , 或 元素上。
.btn、.btn-primary、.btn-default、.btn-block、.btn-(大小)、.btn-outline-(以上各种颜色词，你懂的)。

• .active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。

按钮组

.btn-group、.btn-group-*(大小)、.btn-group-vertical
又感觉没差…

徽章（Badges）

主要是用来突显新的或者未读的项，让该项更加显眼，添加到 元素上即可。
.badge、.badge-*(各种颜色你懂的)

• 使用 .badge-pill 类来设置药丸形状徽章。
• 徽章可以根据父元素的大小的变化而变化。

进度条

进度条创建步骤：

• 添加一个带有 .progress 类的
  。
• 接着，在上面的
  内，添加一个带有 class .progress-bar 的空的

  。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

.bg-*(各种颜色你懂的)进度条颜色。
.progress-bar-striped条纹进度条。
.progress-bar-animated 类可以为进度条添加动画。

分页

通过.pagination类和.page-item来实现分页功能。

• .pagination-*(大小)。
• 给a标签加.page-link。
• .active 类来高亮显示。
• .disabled 类可以设置分页链接不可点击。

面包屑导航

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航。

列表组

在

元素上添加 .list-group 类, 在
• 元素上添加 .list-group-item 类。
  • 通过添加 .active 类来设置激活状态的列表项。
  • .disabled 类用于设置禁用的列表项。
  • .list-group-item-action鼠标悬停显示灰色背景。
  • .list-group-item-*(各种颜色你懂的)。

  卡片

  .card类来创建一个简单的卡片。

  • .card-header类用于创建卡片的头部样式。
  • .card-body类创建卡片的正文样式。
  • .card-footer 类用于创建卡片的底部样式。

  提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

  • 在头部元素上使用 .card-title 类来设置卡片的标题 。
  • .card-text 类用于设置卡片正文的内容。
  • .card-link 类用于给链接设置颜色。
  • 给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片。
  • 图片要设置为背景，可以使用 .card-img-overlay 类。

  下拉菜单

  .dropdown 类用来指定一个下拉菜单。

  和原先的也没什么区别…

  • 使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
  • 在
    元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
  • .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线。
  • .dropdown-header 类用于在下拉菜单中添加标题。
  • .active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
  • 如果要禁用下拉菜单的选项，可以使用.disabled 类。
  • .dropdown-menu-right 类实现下拉菜单元素项右对齐。
  • 下拉菜单向上弹出，可以将
    元素的 class=“dropdown” 替换为 “dropup”。

  折叠板

  .collapse 类用于指定一个折叠元素 (实例中的

  ); 点击按钮后会在隐藏与显示之间切换。

  • 控制内容的隐藏与显示，需要在 或

元素上添加 data-toggle=“collapse” 属性。

data-target="#id" 属性是对应折叠的内容 (

)。** 元素上你可以使用 href 属性来代替 data-target 属性**。

折叠的内容是默认隐藏的，可以通过添加 .show 类让内容默认显示。

使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

导航

使用.nav类来创建导航。

• 创建一个简单的水平导航栏，可以在
  元素上添加 .nav类，在每个
  • 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。
  • 导航默认左对齐，可以使用.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。
  • .flex-column 类用于创建垂直导航。
  • 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
  • .nav-pills 类可以将导航项设置成胶囊形状。
  • .nav-justified 类可以设置导航项齐行等宽显示。
  • 设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
  • 如果希望有淡入效果可以在 .tab-pane 后添加 .fade类。
  • 胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle=“pill”。

  导航栏

  在

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

  导航栏上的选项可以使用

  元素并添加 class=“navbar-nav” 类。 然后在
  • 元素上添加 .nav-item 类， 元素上使用 .nav-link 类。
    • 通过删除 .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-toggle”, data-toggle=“collapse” 与 data-target="#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id。

    • 导航栏的表单 元素使用 class=“form-inline” 类来排版输入框与按钮。
    • 使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
    • 使用 .fixed-top 类来实现导航栏的顶部固定，.fixed-bottom 类用于设置导航栏固定在底部。

    表单

    .form-group、.form-control、.form-check、.form-check-label、.form-check-input、.radio、

    • 内联表单需要在 元素上添加 .form-inline类。
    • 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
    • 使用 .form-check-inline 类可以让选项显示在同一行上。

    轮播

    轮播是一个一个幻灯片组件，用来循环显示图片元素，或者滚动的文字。
    我认为需要把这个码住

      
    //body部分如下：
    
      
      
    
        
    
        
    
        
    
      
      
      
    
        
    
          
          
    
            
    第一张图片描述标题
            
    描述文字!
          
        
        
    
          
          
    
            
    第二张图片描述标题
            
    描述文字!
          
        
        
    
          
          
    
            
    第三张图片描述标题
            
    描述文字!
          
        
      
      
      
        
      
      
        
      
    
    

    模态框

    模态框（Modal）是覆盖在父窗体上的子窗体。通常，使用模态框的目的是用来显示来自一个单独的源的内容，而且可以在不离开父窗体的情况下有一些互动。

    
      
    模态框实例
      
      

打开模态框

模态框头部

×

模态框内容..

关闭

提示框

提示框是一个小小的弹窗，只有当鼠标移动到元素上时才会显示，鼠标移出后消失。

• 通过向元素添加 data-toggle=“tooltip” 来来创建提示框，title 属性的内容为提示框显示的内容。
• 可以使用 data-placement 属性来设定提示框显示的方向: 上top, 下bottom, 左left 或 右right:

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

弹出框

通过向元素添加 data-toggle=“popover” 来来创建弹出框。

• title 属性的内容为弹出框的标题。
• data-content 属性显示了弹出框的文本内容。
• 默认情况下弹出框显示在元素右侧。可以使用 data-placement 属性来设定弹出框显示的方向: 上：top, 下：bottom, 左：left 或 右：right。
• 默认情况下，弹出框在再次点击指定元素后就会关闭，可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框。
• 想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”。

注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。

滚动监听(Scrollspy)

会根据滚动的位置，自动更新导航条的目标。

滚动监听的创建：

• 向想要监听的元素（通常是 body）添加 data-spy=“scroll” 。
• 然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
• 注意可滚动项元素上的 id （
  ） 必须匹配导航栏上的链接选项 （)。
• 可选项 data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
• 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用

多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。

• 想将头像图片显示在右侧，可以在 .media-body 容器后添加图片。
• 可以使用 align-self-*(start,center,end)相关类来设置多媒体对象的图片显示位置。

实用工具

边框

• 使用 border 类可以添加或移除边框。
  .border、.border-*(top,right,bottom,left)(-0)
• 边框颜色：border-*(几种颜色你懂的)。
• 圆角边框：.rounded,.rounded-*(top,right,bottom,left,circle,0)

浮动

• .float-right 类用于设置元素右浮动。
• .float-left 设置元素左浮动。
• .clearfix 类用于清除浮动。
• 设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小。

居中对齐

使用 .mx-auto 类来设置居中对齐。

宽高度

• 元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度。
• 元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度。

写在后面

BootStrap的学习的时间跨度也有点大，不过不是很影响消化吸收，感觉BootStrap4和BootStrap差别没有很大，多了一些语义化标签，相信接下来会很快上手做一个小demo的。

冲冲冲！