接上一篇CSS入门，依然是来自Udemy的课程“The Web Developer Bootcamp”，终于学到了CSS的最后一个单元……继、继续愉快的学习吧😉


Bootstrap

编程界的乐高模块，只要copy-paste，不用自己写，就可以得到responsive-layout了！小妹儿，Bootstrap不了解一下吗！

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是基于 HTML、CSS、JS的。Bootstrap是由 Twitter的Mark Otto和Jacob Thornton开发的，是2011 年八月在GitHub上发布的开源产品。它最棒的地方当然是responsive layout啦，中文是响应式设计。

如果你想看Bootstrap有多好用、多神奇，可以访问Bootstrap Expo来看看大家用它建成了什么样子的网站。

Udemy这次的课程仍然用的是三代Bootstrap，而它现在已经是四代啦，所以我自己实验的时候会用四代来做。学习从3到4的迁移可以点这里。


Bootstrap工作原理

Adding classes to existing elements and those classes are defined in that boostrap.css file.

用中文解释就是：给现有元素赋上类，而bootstrap.css则负责定义类的样式。


安装Bootstrap

到官网下载 bootstrap.zip 之后，找到最有用的一个文档 bootstrap.css ，可以看到所有的样式库。也可以嵌入在线的Bootstrap CDN，更方便。

装好之后，可以查看Bootstrap Docs来使用这个神奇的代码库OUO

记住：在 <head> 里用 <link> 插入bootstrap的CDN，随后在 <body> 里用 <script> 先插入jQuery的CDN，再插入bootstrap JavaScript的CDN。这样才能顺利使用 Navbar 功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
	<title>Here's a title</title>
	<!-- head里插入的是 bootstrap 的CDN -->
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!-- 先插入 jquery 的CDN -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- 再插入 bootstrap js 的CDN -->
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>


Bootstrap组件

这个小节会挨个介绍并实验一下Bootstrap的组件们，好用不难，简直福音啊……

1. Buttons 按键

.btn有很多预设的样式，是为了与<button>元素共同使用的：

1
2
/* 基本语法 */
<button type="button" class="btn btn-primary">Primary</button>

基本语法固定后，参考下图可以知道class="btn btn-XXX"分别是什么效果。

按键样式对应效果图

1.1 Button tags

.btn可以用在<a>, <button>，或<input>元素上。用在<a>元素上的时候只支持同网页内的功能，不支持跳转到新的页面。例子走一波：

1
2
3
4
5
/* 用a tag时候要赋予角色 */
<a class="btn btn-primary" href="#" role="button">Link</a>

/* 用input tag要写type和value */
<input class="btn btn-primary" type="submit" value="Submit">

1.2 Outline buttons

如果你不想要按钮有背景颜色或者图片，可以用如下的按键样式实现线框效果：

1
2
/* 把.btn换成.btn-outline */
<button type="button" class="btn btn-outline-primary">Primary</button>

线框效果，其中Light按钮鼠标停留

1.3 Sizes

尺寸分为large, small, 和block，代码如下：

1
2
3
4
5
6
7
8
/* .btn-lg */
<button type="button" class="btn btn-primary btn-lg">Large button</button>

/* .btn-sm */
<button type="button" class="btn btn-primary btn-sm">Small button</button>

/* .btn-block */
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>


2. Jumbotron 超大屏幕

Jumbotron的设计初衷是，无论它在什么容器之内，它都会占据这个容器的100%宽度。所以没有容器，只有class="jumbotron"的时候，它默认是会占据整个浏览器屏幕的。当把这个<div>放入class="container"内的时候，就会根据container的定义只占领部分浏览器屏幕。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 把jum放入容器内，占据部分屏幕 */
<div class="container">
	<div class="jumbotron">
		<h1 class="display-4">大家好我叫Jumbotron</h1>
		<p class="lead">jumbotron在container里，所以我有margin，科科！</p>
		<hr class="my-4">
		<p class="button">
		<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
		</p>
	</div>
</div>

/* 把容器放入jum内，占据整个屏幕 */
<div class="jumbotron jumbotron-fluid">
	<div class="container">
		<h1 class="display-4">Fluid jumbotron</h1>
		<p class="lead">container在jumbotron里面，jumbotron默认占据整个屏幕哦亲！</p>
	</div>
</div>

两种Jumbotron的对比


3. Forms 表单

在Bootstrap的表单中，一定要把每个表单的type写对，比如.email给电邮地址，.number给数字信息，这样可以更好地利用Bootstrap已经定义的输入控制和验证。

在Form中有两个很必要的class，分别是form-group和form-control。它们的功能是：

  • form-group负责把输入框分组并添加一定的空间
  • form-control负责按照Bootstrap定义好的样式，给输入框赋予样式

以下是基本表格的代码及效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* form-group把输入框分组 */
/* form-control负责赋予输入框样式 */
<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
		<small id="emailHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
  </div>

  <div class="form-group">
  		<label for="exampleInputPassword1">Password</label>
    	<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>

  <div class="form-check">
  		<input type="checkbox" class="form-check-input" id="exampleCheck1">
    	<label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap基础表格样式


Inline Form

只要在所有需要出现在行内的输入框<div>前加入<form class="form-inline">就解决问题啦！

Bootstrap行内输入框


4. Navbar 导航栏

超级常用，帮你整理你网站的分栏，请看官方文档。在这小节需要用到jQuery的CDN来实现下拉菜单和hamburger menu，中文是折叠菜单？每次使用只需要从官网复制-粘贴，再修改即可。

记住！把 jquery-3.3.1.js 的CDN放在 bootstrap.min.js 的CDN前面，才能顺利实现效果，因为Bootstrap的很多功能是基于jQuery的。

下面是我根据Bootstrap的模板修改的自己的测试页面，其中有一个类对于hamburger menu起了决定性的作用，那就是data toggle="collapse"，以及data-target="#navebarSupportedContent"。

所有放进collapse div的标题，在手机上显示都会被折叠起来，而想折叠几个标题由你自己决定。data-target的名字是可以修改的，只要记住下方<div>里的<id>也随之修改就可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 定义导航栏的样式 */
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
/* 定义主页brand名称 */
	<a class="navbar-brand" href="#">麦咪测试</a>
/* 实现hamburger menu的代码 */
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

/* 所有放进collapse div的标题都会折叠起来 */
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
			<a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
			</li>
      		<li class="nav-item">
        	<a class="nav-link" href="#">作品</a>
      		</li>
      		<li class="nav-item">
      		<a class="nav-link" href="#">关于</a>
      		</li>
    	</ul>
    </div>
</nav>

点击Hamburger Menu的效果图


5. The Grid System 网格系统

在网页设计中，网格的作用是快速创建页面布局，组织内容，让网站易于浏览，且降低用户端的负载。而

Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备窗口大小的增加而适当地扩展到12列。图片来自Ryan Wright的博客。

网格系统与设备适配

5.1 网格系统规则

由于bootstrap是mobile-based，所以为了达到响应式网格的效果，系统中共设置了5个responsive breakpoint，见下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / portrait phones
  xs: 0,
  // Small screen / landscape phones
  sm: 576px,
  // Medium screen / tablets
  md: 768px,
  // Large screen / desktops
  lg: 992px,
  // Extra large screen / wide desktops
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

下面是Bootstrap网格的基本结构，要记住很重要的三点，那就是：

  • 行 row 必须放在 .container 内，以获得正确的对齐和内边距
  • Rows are wrappers for columns，要使用行 row 来创建列 col 的水平组
  • 内容必须放置在 col 列内，且唯有列 col 可以是行 row 的直接子元素
  • 列通过内边距 padding ，来创建列 col 内容之间的间隙。如果需要取消间隙，可以把行的margin 和列的 padding 去掉，并在 .row 中添加 .no-gutters 。
1
2
3
4
5
6
7
8
9
/* 在xs/s/m/l/xl设备上每个column占X栏 */
<div class="container">
	<div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">


5.2 使用Grid System

.container 生成有margin的容器

.container-fluid 生成无margin占据全屏的容器

可以 .row 套 .row ，所谓的nested grids. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 定义.pink类 */
</head>
	<style type="text/css">
	.pink {
		background: pink;
		border: 1px solid grey;
	}
	</style>
</head>

/* 当在large显示下，每个colum占6栏 */
<body>
	<br>
<div class="container">
	<div class="row">
		<div class="col-lg-6 pink">COL LG 6</div>
		<div class="col-lg-6 pink">COL LG 6</div>
	</div>
</div>
</body>

当浏览器足够宽的时候，显示效果如下：

Web端效果


5.3 小练习

做一个电脑 large 四栏，平板medium 四栏，大屏手机small 两栏，小屏幕手机extra small一栏的bootstrip grid.

1
2
3
4
5
6
7
8
<div class="container">
	<div class="row">
		<div class="col-md-3 col-sm-6 pink">EVENT 1</div>
		<div class="col-md-3 col-sm-6 pink">EVENT 2</div>
		<div class="col-md-3 col-sm-6 pink">EVENT 3</div>
		<div class="col-md-3 col-sm-6 pink">EVENT 4</div>
	</div>
</div>

从上面的练习可以看出，当在大屏和中屏显示效果一样的时候，只写更小的那个即可。


练习题

老师的tips：

  • If you’re looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you’ll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.
  • If you want to crop all of the images to the same size then see an example of this here.

网页效果图

自己的笔记：

  • 将导航栏固定在 顶部 or 底部 的代码：.navbar fixed-top，.navbar fixed-bottom


2. Start-up Landing Page - Purrfect Match

网页效果图

自己的笔记

  • 让导航栏项目靠右对齐的代码是 <ul class="navbar-nav navbar-right"> ；

  • bootstrap 的样式会覆盖 <body> 的样式；

  • 给文字加阴影的css代码是：

    1
    2
    3
    4
    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }


重要！！！

如果你想要你用bootstrap做的网站在任何设备上都是响应式的，那么你需要在 <head> 内的 <title> 上方加入如下代码：

1
<meta name="viewport" content="width=device-width, initial-scale=1">


Bootstrap资源

Free Bootstrap Themes & Templates developed by Creative Tim


Icon资源

Bootstrap 并没有自己的默认图标库，但他们推荐了一些很好的资源。Bootstrap 推荐用SVG格式，因为它们的矢量图支持比较友好。下面列出一些推荐的icon库：