BootStrap4 入门教程学习摘要笔记

最新推荐文章于 2024-06-03 20:31:46 发布

抓更够

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量2.3k

点赞数 2

分类专栏：学习笔记文章标签： BootStrap4 入门笔记前端

本文链接：https://blog.youkuaiyun.com/weixin_43451006/article/details/100046253

版权

学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文档是BootStrap4的入门教程，涵盖了从基本介绍到复杂组件的详细使用，包括弹性盒Flexbox、网格系统、排版、颜色设置、表格、图片、超大屏幕、信息提示框、按钮、徽章、进度条、分页、面包屑导航、卡片、下拉菜单、折叠板、导航和表单等，是快速掌握BootStrap4的全面指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BootStrap4 简介

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

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

自定义选项

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

弹性盒Flexbox

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

页面创建

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    //width=device-width 表示宽度是设备屏幕的宽度。
    //initial-scale=1 表示初始的缩放比例。
	//shrink-to-fit=no 自动适应手机屏幕的宽度。
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
</html>

容器类

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> 标签中添加 .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 类用于设置提示框在关闭时的淡出和淡入效果。

按钮

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

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

按钮组

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

徽章（Badges）

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

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

进度条

进度条创建步骤：

添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

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

分页

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

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

面包屑导航

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

列表组

在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .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 类用于给链接设置颜色。
给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片。
图片要设置为背景，可以使用 .card-img-overlay 类。

下拉菜单

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

和原先的也没什么区别…

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

折叠板

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle=“collapse” 属性。
data-target="#id" 属性是对应折叠的内容 (<div id=“demo”>)。** <a> 元素上你可以使用 href 属性来代替 data-target 属性**。
折叠的内容是默认隐藏的，可以通过添加 .show 类让内容默认显示。
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .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”。

导航栏

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

导航栏上的选项可以使用 <ul> 元素并添加 class=“navbar-nav” 类。然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .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 类可以让选项显示在同一行上。

轮播

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

  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
//body部分如下：
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://atts.w3cschool.cn/attachments/knowledge/201803/24575.png">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://atts.w3cschool.cn/attachments/knowledge/201702/43125.png">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://atts.w3cschool.cn/attachments/knowledge/201804/30601.png">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

模态框

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

<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</div>

提示框

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

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

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

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

弹出框

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

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

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

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

滚动监听(Scrollspy)

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

滚动监听的创建：

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

  <style>
  body {
      position: relative; 
  }
  </style>

多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .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的。

冲冲冲！