搜 索

框架丨Bootstrap 入门

  • 207阅读
  • 2021年10月13日
  • 0评论
首页 / 默认分类 / 正文

前言

Bootstrap 来自 Twitter,它简洁灵活,可以使得 Web 开发更加快捷。

Bootstrap 是全球最受欢迎的前端开源工具库,它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能,能够让你快速设计并定制你的网站。

目前最新版本是 V5.1.3,但我一般使用 V4.6.0 版本。

介绍

对照官方的中文文档实践即可。

布局容器

Bootstrap V4.x 提供了 .container(固体自适应布局) 与 .container-fluid(流体100%自适应布局)两种容器布局。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap v4.6.0</title>
  <!-- Bootstrap 的 CSS 文件,本地测试使用不压缩的 css -->
  <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.css">
  <style>
    .row {
      border: dashed 1px #2ecc71;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 固体自适应栅格布局 -->
  <div class="container">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>
  <!-- 100% 流体自适应布局 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>
  <!-- 选项 1:jQuery 和 Bootstrap 集成包(集成了 Popper) -->
  <script src="../jquery-3.6.0/package/dist/jquery.slim.js"></script>
  <script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>

注意:容器布局是可以嵌套的,但是不推荐

栅格等级

Bootstrap 的栅格系统分 5 个等级,如下所示。

Extra smallSmallMediumLargeExtra large
<576px≥576px≥768px≥992px≥1200px

如果同时使用两个或两个以上的级别,并且比例相同,那么遵循移动端优先的原则。示例如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap v4.6.0</title>
  <!-- Bootstrap 的 CSS 文件,本地测试使用不压缩的 css -->
  <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.css">
  <style>
    div {
      border: solid 1px #2ecc71;
      background-color: #a5a5a5;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 固体自适应栅格布局 -->
  <div class="container">
    <div class="row">
      <div class="col-4 col-sm-1 col-md-4 col-lg-6 col-xl-12">
        第一列
      </div>
      <div class="col-4 col-sm-10 col-md-2 col-lg-6 col-xl-12">
        第二列
      </div>
      <div class="col-4 col-sm-1 col-md-6 col-lg-12 col-xl-12">
        第三列
      </div>
    </div>
  </div>
  <!-- 选项 1:jQuery 和 Bootstrap 集成包(集成了 Popper) -->
  <script src="../jquery-3.6.0/package/dist/jquery.slim.js"></script>
  <script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>

使用 .w-100 可以切割栅格栏位,进行分行操作。

<!-- 100% 流体自适应布局 -->
<div class="container-fluid">
<div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <!-- 分行 -->
  </div class="w-100"><div>
  <div class="col-sm">
    One of three columns
  </div>
</div>
</div>

隐藏与显示

一般来说,网页适配移动端,会单独开发一套对应移动端的页面,因为手机的尺寸不够,有些内容不方便浏览,所以需要隐藏一些元素。

  • 要隐藏元素,只需要对任何响应屏幕变化使用 .d-none 这个 class 即可,语法为: .d-{sm, md, lg, xl}-none
  • 要仅在给定的屏幕尺寸间隔上显示元素,可以将一个 .d-*-none 类与一个 .d-*-* 类组合使用,例如:.d-none .d-md-block .d-xl-none 将为所有屏幕尺寸隐藏该元素,但在中型和大型设备上则会显示。
功能描述
所有隐藏.d-none
仅在 xs 尺寸上隐藏.d-none .d-sm-block
仅在 sm 尺寸上隐藏.d-sm-none .d-md-block
仅在 md 尺寸上隐藏.d-md-none .d-lg-block
仅在 lg 尺寸上隐藏.d-lg-none .d-xl-block
仅在 xl 尺寸上隐藏.d-xl-none
所有可见.d-block
仅在 xs 尺寸上可见.d-block .d-sm-none
仅在 sm 尺寸上可见.d-none .d-sm-block .d-md-none
仅在 md 尺寸上可见.d-none .d-md-block .d-lg-none
仅在 lg 尺寸上可见.d-none .d-lg-block .d-xl-none
仅在 xl 尺寸上可见.d-none .d-xl-block

对齐与排列

对齐

行对齐样式
居顶(默认).align-items-start
居中.align-items-center
居底.align-items-end
列对齐样式
居顶(默认).align-self-start
居中.align-self-center
居底.align-self-end
水平对齐样式
居左(默认).justify-content-start
居中.justify-content-center
居右.justify-content-end
间隔相等.justify-content-around
两端对齐.justify-content-between

排列

  • 栅格的列可以排序,使用 .order-N 指定,N 的最大值为 12;
  • 使用 .order-first 强行设置列为第一列,.order-last 为最后一列;
  • 使用 .offset-N.offset-*-N 设置列的偏移量,N 表示栅格列数;
  • 使用 .ml-Nmr-N 微调列距离;
  • 使用 .ml-auto.mr-auto 来左右对齐。

页面内容

排版

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

一个显得更大的标题样式:Display headings,可以比原生的标题标签更大。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

通过添加 .lead 类可以让段落突出显示。

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

内联文本元素

  • 文本高亮:<mark> 标签。
  • 文本显示删除线:对于被删除的文本使用 <del> 标签。
  • 文本显示删除线:对于没用的文本使用 <s> 标签。
  • 文本显示下划线:额外插入的文本使用 <ins> 标签。
  • 文本显示下划线:为文本添加下划线,使用 <u> 标签。
  • 小号文本:对于不需要强调的 inline 或 block 类型的文本,使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
  • 强调文本:通过增加 font-weight 值强调一段文本,使用 <strong> 标签。
  • 斜体文本:用斜体强调一段文本,使用 <em> 标签。
  • 在 HTML5 中可以放心使用 <b><i> 标签。<b> 用于高亮单词或短语,不带有任何着重的意味;而 <i> 标签主要用于发言、技术词汇等。

    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>

    缩略语

    当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语有一个默认下划线,并获得一个帮助光标,以便在悬停时为用户提供额外的上下文。title 属性是单词全文,<abbr> 标签是你想要显示的缩略词。
    为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。

    <p><abbr title="attribute">attr</abbr></p>
    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

    引用块

    将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。

    <blockquote class="blockquote">
    <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    </blockquote>

    命名来源

    添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中(斜体显示)。

    <blockquote class="blockquote">
    <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    展示风格

    默认是左对齐,根据需要通过更改文本的对齐方式来更改 blockquote 的对齐方式。

    <!-- 文本居中对齐 -->
    <blockquote class="blockquote text-center">
    <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    
    <!-- 文本居右对齐 -->
    <blockquote class="blockquote text-right">
    <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    列表

    有序列表用 <ol> 标签;无序列表用 <ul> 标签,但是它们在各条列前面都有序号或符号以示区隔。

    无样式列表

    移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

    <ul class="list-unstyled">
    <li>This is a list.</li>
    <li>It appears completely unstyled.</li>
    <li>Structurally, it's still a list.</li>
    <li>However, this style only applies to immediate child elements.</li>
    <li>Nested lists:
      <ul>
        <li>are unaffected by this style</li>
        <li>will still show a bullet</li>
        <li>and have appropriate left margin</li>
      </ul>
    </li>
    <li>This may still come in handy in some situations.</li>
    </ul>

    内联列表

    将所有元素放置于同一行。

    <ul class="list-inline">
    <li class="list-inline-item">This is a list item.</li>
    <li class="list-inline-item">And another one.</li>
    <li class="list-inline-item">But they're displayed inline.</li>
    </ul>

    并排列表

    <dl class="row">
    <dt class="col-sm-3">Description lists</dt>
    <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    
    <dt class="col-sm-3">Term</dt>
    <dd class="col-sm-9">
      <p>Definition for the term.</p>
      <p>And some more placeholder definition text.</p>
    </dd>
    
    <dt class="col-sm-3">Another term</dt>
    <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
    
    <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
    <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
    
    <dt class="col-sm-3">Nesting</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">Nested definition list</dt>
        <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
      </dl>
    </dd>
    </dl>

    代码

    行内代码

    <code> 包裹行内代码片段。请确保转义 HTML 代码中的尖括号。

    For example, <code>&lt;section&gt;</code> should be wrapped as inline.

    代码块

    <pre> 包裹多行代码。再次注意,请确保转义代码中的尖括号,以便正确展示。你还可以选择性地添加 .pre-scrollable 类,实现垂直滚动,并且设定的最大高度为 340px。

    <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
    &lt;p&gt;And another line of sample text here...&lt;/p&gt;
    </code></pre>

    变量标签

    使用 <var> 标签标识变量。

    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>

    用户输入

    <kbd> 标签通常用来标明键盘输入。

    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

    示例输出

    <samp> 标签指示程序的示例输出。

    <samp>This text is meant to be treated as sample output from a computer program.</samp>

    表格

    基本表格

    为任意 <table> 标签添加 .table 类可以为其赋予基本的表格样式。

    <table class="table">
    <thead>
      <tr>...</tr>
    </thead>
    <tbody>
      <tr>...</tr>
    </tbody>
    </table>

    颜色反转

    使用 .table-dark 样式可以颜色反转,暗夜模式。

    <table class="table table-dark">
    <thead>
      <tr>...</tr>
    </thead>
    <tbody>
      <tr>...</tr>
    </tbody>
    </table>

    表头颜色

    可以给 <thead> 标签添加 .thead-light 或者 .thead-dark 样式实现浅黑色或深灰色的表头。

    <table class="table">
    <thead class="thead-dark">
      <tr>...</tr>
    </thead>
    <tbody>
      <tr>...</tr>
    </tbody>
    </table>
    
    <table class="table">
    <thead class="thead-light">
      <tr>...</tr>
    </thead>
    <tbody>
      <tr>...</tr>
    </tbody>
    </table>

    条纹状表格

    增加 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

    <table class="table table-striped"></table>

    有边框的表格

    默认的表格,边框是不完全的;添加 .table-bordered 类为表格和其中的每个单元格增加边框。

    <table class="table table-bordered"></table>

    无边框的表格

    添加 .table-borderless 类可以消除边框。

    <table class="table table-borderless"></table>

    悬停效果

    通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

    <table class="table table-hover"></table>

    紧缩表格

    通过添加 .table-sm 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

    <table class="table table-sm"></table>

    状态类

    通过这些状态类可以为行或单元格设置颜色。

    <!-- On rows -->
    <tr class="table-active">...</tr>
    <tr class="table-primary">...</tr>
    <tr class="table-secondary">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-danger">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-light">...</tr>
    <tr class="table-dark">...</tr>
    
    <!-- On cells (`td` or `th`) -->
    <tr>
    <td class="table-active">...</td>
    <td class="table-primary">...</td>
    <td class="table-secondary">...</td>
    <td class="table-success">...</td>
    <td class="table-danger">...</td>
    <td class="table-warning">...</td>
    <td class="table-info">...</td>
    <td class="table-light">...</td>
    <td class="table-dark">...</td>
    </tr>

    表格标题

    <caption> 标签定义表格的标题,必须直接放置到 <table> 标签之后。但是 Bootstrap 的标题不是在表头,而是显示在表格的左下角。

    <table class="table">
    <caption>List of users</caption>
    </table>

    响应式表格

    将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动(底部会出现滚动条)。当屏幕大于 768px 宽度时,水平滚动条消失。

    <div class="table-responsive">
    <table class="table">
      ...
    </table>
    </div>

    还可以设置 .table-responsive{-sm | -md | -lg | -xl} 适用于某一屏幕尺寸的响应式表格。

参考

官网:Bootstrap 官网
中文网:Bootstrap 中文网
案例:hackerthemes
打 赏
  • 支付宝
  • 微信
Alipay
WeChatPay
Spring丨AOP
« 上一篇
评论区
暂无评论
avatar