【Bootstrap5】精细学习记录

阅读原文时间：2021年05月11日阅读：1

【Bootstrap5】精细学习记录

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Bootstrap一切以源码为重，大体和html差不多（其中网格系统算是创新且重要的），需要时查源码。

移动设备优先

响应式图像

全局显示、排版和链接

等……

具体可见菜鸟教程

多阅读源码！

网格系统将container容器分为12列，行row最好在container内，列在行row内，再通过"col--"定义在不同视口情况下占的列数。

基本网格结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Bootstrap v5.0.0源码：

可以通过以下代码，不断调整视口大小自己感觉。

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>bootstrap-learning</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>hello world</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
                </p>

                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illo inventore veritatis et quasi architecto beatae vitae
                dicta sunt explicabo.
                </p>
            </div>

            <div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium.
                </p>

                <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
                consectetur, adipisci velit, sed quia non numquam eius modi
                tempora incidunt ut labore et dolore magnam aliquam quaerat
                voluptatem.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

列偏移

即设置列的margin-left，通过查阅源码，bootstrap5.0.0可以通过

offset-i  i偏移的列数（0，11）
offset-xx-i xx:md,sm,···

列嵌套

顾名思义，在row里面再填列row就可以了。

新列的网格系统均参考父元素。

列排序

Bootstrap5.0.0中，排序使用order

order-i  i表示顺序
order-xx-i  xx:md,sm,···
默认顺序层级相同，层级相同时，靠前的排前面

text

Bootstrap5.0.0源码：

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-dark {
  color: #212529 !important;
}

.text-white {
  color: #fff !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  color: inherit !important;
}

更多可参考这里，然后多阅读源码就行了。

代码

内联代码
<pre>
    代码块
</pre>
代码中<: &lt;
     >: &gt;

表格

实测：Bootstrap5.0.0还有一些bug

最好先使用Bootstrap3或者4。

--------------------后面以bootstrap3为准--------------------

一些样式就不说了。

表单

垂直表单（默认）

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

内联表单

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

水平表单

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

按钮

图片

辅助类

字体图标

Customize 字形图标（Glyphicons） - 菜鸟教程 (runoob.com)

下拉菜单

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

···太多了，不想写了，菜鸟教程已经写得很全了，只需要自己注意一下版本问题就行了，下面就记录一下关键类吧！（相信xdm都会vscode的Emmet吧）···

按钮组

#基本按钮组
div.btn-group>button[type=button].btn.btn-defualt*3
#按钮工具栏
div.btn-tool[role=toolbar]>(div.btn-group>button[type=button].btn.btn-default)*3
#按钮大小
btn-group-xx  xx:sm,lg···
#嵌套
#垂直按钮组
div.btn-group-vertical>(···)

按钮下拉菜单

基本：

<div class="btn-group">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown">原始
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

按钮下拉菜单大小：

调整按钮的类即可。

<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">

按钮上拉菜单

向父 .btn-group 容器添加 .dropup 即可。

<div class="btn-group dropup">
</div>

输入框组

基本输入框组：

1.把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
2.接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
3.把该 <span> 放置在 <input> 元素的前面或者后面。
div.input-group>(span.input-group-addon{@}+input[type=text].form-control)

按钮插件：

使用.input-group-addon替代.input-group-btn来包裹按钮
div.input-group>(span.input-group-button{@}+input[type=text].form-control)

导航元素

标签式导航菜单

ul.nav.nav-tabs>(li.active>a[href=#]+(li>a[href=#])*5)

胶囊式导航菜单

ul.nav.nav-pills>(li.active>a[href=#]+(li>a[href=#])*5)

垂直导航菜单

在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-stacked

两端对齐导航

在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-justified

菜单项内容

.tab-content与.tab-pane和data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>

导航栏

默认导航栏

1.向 <nav> 标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation"，有助于增加可访问性。
3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

响应式导航栏

# <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
    # <div class="collapse navbar-collapse" id="example-navbar-collapse"></div>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

表单导航栏

# 在原本标签位置：
<form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
</form>

导航栏按钮

# 不在form中的button
# .navbar-btn 可被使用在 <a> 和 <input> 元素上。
<button type="button" class="btn btn-default navbar-btn">
    导航栏按钮
</button>

导航栏文本

<p class="navbar-text">Runoob 用户登录</p>

导航栏组件对齐

.navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。

导航栏固定在顶底部

# 顶部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
</nav>
# 底部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
</nav>
# 随着页面移动的顶底部
<nav class="navbar navbar-default navbar-static-top" role="navigation">
</nav>

反色导航栏

<nav class="navbar navbar-inverse" role="navigation">
</nav>

面包屑组

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

分页

分页（Pagination）

ul.pagination>(li>a[href=#]{&laquo;}+(li>a[href=#]{$}*5)+li>a[href=#]{&raquo;})

翻页（Pager）

ul.pager>(li.previous>a[href=#]{&larr;pre}+li.next>a[href=#]{next&rarr;})

标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

徽章

<span class="badge">50</span>
# 当内部为空时，自动隐藏
<span class="badge pull-right">42</span>
# pull-right、pull-left 调整徽章位置
# 相对标签更圆润

超大屏幕

1.创建一个带有 class .jumbotron. 的容器 <div>
2.除了更大的 <h1>，字体粗细 font-weight 被减为 200

页面标题

如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中
div.page-header

缩略图

1.在图像周围添加带有 class .thumbnail 的 <a> 标签。
2.这会添加四个像素的内边距（padding）和一个灰色的边框。
3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。

警告

普通：

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

可取消：

# 同时添加alert-dismissable
<div class="alert alert-success alert-dismissable">

进度条

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60"
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

其他样式：

# 在 progress-bar 基础上添加 progress-bar-* ( * = success、info、warning、danger)
  决定进度条颜色
# 条纹的进度条
  在 progress 基础上添加 progress-striped
# 运动起来
  在 progress 基础上添加 active
# 堆叠起来
  div.progress元素内部 添加多个 div.progress-bar

多媒体对象

媒体对象可以用更少的代码来实现媒体对象（如：图像、视频、音频等）与文字的混排。

<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本...</p>
  </div>
</div>

列表组

ul.list-group>(li.list-group-item)*5

列表组竖直排列，可以使用一下css代码获得水平排列列表组。

.list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
}

面板

基本

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

其他样式：

panel-primary
panel-success
panel-info
panel-warning
panel-danger

面板内部结构：

panel-heading
1.使用 .panel-heading class 可以很简单地向面板添加标题容器。
2.使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。
panel-body
panel-footer
其他结构：如： table、ul……