[Day 12 - Bootstrap] Bootstrap一下，快速建立响应式网站

为什麽要使用Bootstrap？

现在的网页为了能够适应不同装置，会进行响应式设计；并且大多考量到使用者经验设计(User Experience)，使用一致性的设计元素。因此我们会需要针对每个元素去设定重复的样式，以及在不同萤幕大小上的样子。

Bootstrap 是一套由 HTML、CSS 和 JavaScript 组成的工具，让你只要配合对应的 HTML 架构，加上 Bootstrap Class，就能够快速建立响应式网站，并且轻松设计出保有一致性的介面，使网页开发更容易。

导入 Bootstrap

如何在专案中导入 Bootstrap？在官网的安装教学有介绍各种导入方式，而其中一个方式就是透过 Bootstrap 的 CDN，直接从网路存取它的 CSS 和 JavaScript 的内容。

HTML

<head>
    <!-- Bootstrap CSS 要放在其他自定义 CSS 前面-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    ...
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

预设统一样式

Bootstrap 会预先设定一些 HTML 元素基本的样式，包括文字排版、图片和表格等等。若这些样式并非是你想要的，Bootstrap 也允许你使用 Sass 去自定义、扩展它的基本设定；或是你也可以直接透过建立 CSS 档案，在 Bootstrap 框架的基础上再去微调样式。

<h1>Bootstrap h1</h1>
<h2>Bootstrap h2</h2>
<h3>Bootstrap h3</h3>

Sass 是一种 CSS 预处理器(CSS Preprocessor)，能够以简洁、维护性高的方式撰写 CSS，提升开发效率。

排版布局

断点 (Breakpoints)

Bootstrap中的断点(Breakpoints)一样是用於控制网页在不同装置上进行响应式的排版变化，采用的是 Mobile first 的设计方式，预设使用六个断点如下：

Breakpoint Class infix Dimensions
X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

网格系统 (Grid system)

另外它还基於 Flexbox 建立了一套 Grid system，使用容器、行列来布局，row 包住 column ，每一行会有12栏，可以指定每个元素的栏位数量。

<div class="container">
  <div class="row">
    <!-- 两个元素平分12栏 -->
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
  <div class="row">
    <!-- >=768px：6格 / <768px：8格 -->
    <div class="col-8 col-md-6">3</div>
    <!-- 平分剩下的栏位 -->
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

通用类别

针对 CSS 样式属性设定出一些基本的模板，比如 Color、Border、Position ...等，让我们能够在 Class 属性运用这些类别，快速设计出元素样式，对於设计出一套一致性UI非常有用。

Color

Bootstrap 预设的颜色样式，可以在文字、背景中使用。

<!-- 设定文字是primary颜色 -->
<p class="text-danger">...</p>

Spacing

Bootstrap 预设的 margin、padding，有基於基础尺寸设定的几种 size。

<div class="mx-0">margin-left and margin-right are 0</div>
<div class="pt-0">padding-top is 0</div>

元件 Component

而 Bootstrap 最方便的是，它事先建立了一些网页常用的UI元件，同时做好响应式设计，让你透过使用它写好的程序码就可以快速建立出想要的元件。

Button

<button type="button" class="btn btn-primary">Primary</button>

Navbar

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Current page</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

小结

今天介绍了几个 Bootstrap 的功能，除了排版布局的部分建议你先进一步完整学习之外，其实刚开始使用不太需要清楚知道 Bootstrap 各个设定、组件的细节，只要知道它大概提供了哪些功能，了解 Bootstrap 官方文件的架构後，依据你想要的组件、样式去查询套用方法，基於框架再扩展自定义的样式，就能很好的利用 Bootstrap 加速开发。

下一篇文章会来讲到工程师必备的技能 — Git，运用它进行专案的版本控管，那我们就下章再见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅❤️

参考资料


<<:  辅助魔法强化AWS上的服务扩大范围

>>:  110/10 - Intent.ACTION_MEDIA_SCANNER_SCAN_FILE弃用

33岁转职者的前端笔记-DAY 2 如何处理 BUG 及遇到 BUG 的心态

相信很多程序开发者在开发专案的时候一定会遇到同样的问题 那就是一定会碰到有 BUG 时候 在遇到 B...

Day28 vue.js搜寻栏 分页(pagination)功能

延续昨日 今天我们且战且走 首先先把最简单的排序专案方法搞定 先创一个sortby function...

Day28. 抽象工厂模式

本文同步更新於blog Abstract Factory Pattern 提供一个接口，用於创建相...

Day 27 - Vue 与 HTTP请求 (2)

前一天我们对HTTP有了基础的概念，今天就要来谈谈要怎麽在vue中发送HTTP请求。 我们会引用ax...

不用Recoil的话，如何自己制作一个 Custom hook 来共享全域变数？

需求 在早前几篇文章，我们介绍了 Recoil 这个 library 来在整个 App 分享全域变数...