Jump Start Bootstrap 第1章
Jump Start Bootstrap 第1章
什么是Bootstrap？
Bootstrap是一个前端框架，可以帮助开发者启动网页开发的过程；从后端转前端的(Java、PHP等)开发者可能很难把握CSS和JavaScript；但是，使用Bootstrap,他们只要专注HTML，把棘手的CSS和JavaScript交给Bootstrap。
Bootstrap不仅对网页开发的新手有帮助。通过阅读本书，你也将见证Bootstrap如何成为专业程序员的福音。
Bootstrap，它为什么而存在？
想象一下，你设计了一个网站，它拥有引人注目的导航条、时髦的按钮、漂亮的排版、文本和图像的占位符、大的图片滚动条…然而，你不是一个前端开发专家。但是你已经实现了这些功能，并且只要写一点HTML就能使用这个网站，这就是Bootstrap。所有必要的CSS类和JavaScript代码，都已经包含在Bootstrap包内。例如，在链接元素() 上使用btn类，它将看起来像一个按钮，使用btn-primary可以把链接显示成暗蓝色按钮。
<a href="http://www.baidu.com" class="btn btn-primary">Visit Baidu</a>
然而，Bootstrap不仅仅能装饰链接、图片和占位符；它最重要的功能是网格系统（grid system）。创造一个移动端友好(mobile-friendly)的响应式网页，网格系统是必不可少的；我们将在这章的后面讨论响应式网页设计和网格系统。
Bootstrap它对我有什么帮助?
正如我提到过的，Bootstrap对新手有帮助，但并不只针对新手。 专业人员也可以使用Bootstrap的代码进行二次开发；Bootstrap允许你使用Less和Sass来自定义它的样式。熟悉这些技术的开发人员可以完全修改Bootstrap的默认外观和感觉。有很多自定义BootStrap的方法，我们将在稍后的章节讨论。
CSS框架的历史
这一切大约开始在2006-07年，YUI(雅虎用户界面库)和Blueprint这样的CSS框架开始流行;它们提供了一下基础功能，例如：CSS重置、字体、网格、动态效果、按钮等等；开发者们开始意识到，这些框架对于处理网页开发中的乏味的重复性任务是很有帮助的，并且缩短了开发周期。
这些基础CSS框架后来被完整的前端框架替代，它们把JavaScript混合其中的，比如Bootstrap。Bootstrap将常用的CSS和JavaScript组件组合在一起，满足了许多基本的开发需求，例如创建滑块、产生弹出效果和下拉菜单。Bootstrap封装了许多可以在网站项目中轻松使用的有用组件。它使用标准的HTML建立全部组件。使用Bootstrap，开发人员只需专注于编写适当的HTML，框架可以理解并渲染相应的标记。
CSS原型的需要
拥有一个好的CSS框架的主要原因是为了简化开发过程。在开发网站的过程中，每个网页设计师都有许多共同的任务，每个项目都重复诸如清除浏览器重新设置、在网页布局中创建网格系统、分配排版规则之类的任务可能会让人感到沮丧并耗费时间。一个好的CSS框架提供了一组强大的工具，可以简化这些任务。
好的CSS框架的一些主要亮点包括：
- 更快的开发
- 组织和维护代码
- 让你把时间花在创新上，而不是重新发明轮子
Bootstrap的起源
在2011年，在Twitter工作的的一对网页开发者，Mark Otto和Jacob Thornton开发了Bootstrap；他们的主要关注点是在代码中引入一致性和可维护性。
以下是Mark ottos的博客文章中关于Bootstrap起源的一段话: 一个非常小的开发团队和我一起设计并构建了一个新的内部工具，并看到了一个可以做更多事情的机会。通过这个过程，我们看到自己构建了比另一个内部工具更重要的东西。几个月后，我们得到了一个早期版本的Bootstrap，作为一种记录和分享公司内部设计模式和资源的方式。
Bootstrap1.0.0是在2011年推出的，只有CSS和HTML组件。在Bootstrap1.3.0之前，它还没有包含JavaScript插件，这个版本也兼容IE7和IE8。
2012年又出现了一个主要更新，Bootstrap2.0.0。它完全重写了Bootstrap程序库，并成为了一个响应性的框架。它的组件兼容各种设备，包括移动设备、平板电脑和桌面设备，以及许多新的CSS和JavaScript插件。
在经历了15次重大更新之后，2013年的Bootstrap3是另一个重要的版本，成为了“移动为先，总是响应”的框架。在早期版本的Bootstrap3框架中，响应式的网站是一个可选项。在2013年发布的版本中，类的名称和项目的文件夹结构都发生了变化。但是请注意，Bootstrap3并不是向后兼容的。你不能通过替换核心的CSS和JavaScript文件，直接迁移到这个版本。
如果您想了解一下Bootstrap的完整发展历程，请查看GitHub上的历史版本。它还显示了对每个版本所做的更改。
今天，Bootstrap有一个庞大的全球开发者社区，他们经常在GitHub上为其代码库提供帮助https://github.com/twbs/bootstrap/releases。
Bootstrap已经成为当今最受欢迎的技术之一；它是全栈开发者的必备技能。
响应式网页设计概述
响应式网页设计(Responsive web design)允许开发者创建一个可以在运行中改变布局的网站。开发人员可以创建一个单一的设计，让它可以工作在任何类型的设备上:移动设备、平板电脑、智能电视和个人电脑。
响应式网页通常是流畅的，他们根据屏幕的大小来调整自己，并且与移动设备的触控界面兼容。通过使用响应式网页设计，开发者可以创建强大的网页应用，取代iOS和Android等平台上的原生应用。
根据屏幕大小调整布局
让我们来看看一个例子来更好地理解这个概念。假设我们有一个如图所示的页面布局。
图 1.3 我们的布局有三个主要部分:标题、内容部分、和页脚。标题部分包含一个标志和一个矩形广告。内容部分包含四个较小的帖子，并排放置在一起。然后我们有两个更大的帖子放在小的帖子下面。最后，我们有一个页脚部分，其中有简单的版权文本。
很明显，我们无法轻易地在平板电脑和手机上看到这一页，因为它无法正确地适应屏幕。设计需要为这些用户定制。
让我们假设我们使用了Bootstrap来创建桌面布局。我们已经使用它的网格系统来创建响应式设计，这样布局就会自动调整以适应平板电脑和移动设备。
在平板设备上，布局将如图所示。广告已经被隐藏在标题部分，并且标志已经居中了。布局非常完美。
在智能手机视图中，如图所示，我们可以看到标题部分继续遵循平板电脑的样式，但内容部分发生了重大变化。这些帖子会反射到底部，形成两行，每一行包含两个帖子。更大的帖子现在被放置在每一个帖子的顶部(第二大的帖子在屏幕的底部)。
这是一个非常基本的关于响应式设计的行为的概述。显然，我们可以做的比前面提到的例子要多得多。在第2章学习网格系统时，我们将学习更多关于响应性web设计的知识。
准备Bootstrap
首先，我们需要Bootstrap程序包，所以让我们在Bootstrap的官方网站 https://v3.bootcss.com/ 上，下载最新的4.x.x或3.x.x版本。
Bootstrap需要jQuery让它的JavaScript组件工作。
bootstrap.min.css是什么？
这里另外有一个bootstrap.min.css，它是压缩版的bootstrap.css。 被称为压缩版，是因为它没有空格和注释，减小了文件尺寸。 它将在你的项目完成时使用，为发布项目准备的。
使用Jar包
可以在项目中导入webjars包，达到同样效果。
pom.xml
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>jquery</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>简单示例
src/main/resources/static/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- bootstrap 3.3.7 -->
<link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">x</a>
Hello,<strong>WebJars!</strong>
</div>
</div>
<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/3.2.1/dist/jquery.min.js"></script>
<!-- bootstrap 3.3.7 -->
<script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>注意：jquery.min.js 必须放在 bootstrap.min.js 文件之前引用，否则会报 Uncaught Error: Bootstrap’s JavaScript requires jQuery 异常。
测试网页
启动应用后可以看到以下log：
2018-09-26 08:54:34.342 INFO 1804 --- [ main] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]启动应用访问：http://localhost:8080
自定义Bootstrap
想象一下，一个网站，所有的网站都是用Bootstrap构建的，看起来和感觉都一样。无聊,对吧?幸运的是，我们有能力改变我们使用的任何框架的默认样式。
许多Bootstrap的组件和插件都有自己的默认样式。为了给他们一个特别的体验，你需要替换他们的CSS规则并定义你的自己的。
使用CSS自定义Bootstrap
这种类型的定制通常被称为覆盖默认的CSS。我们实际上用我们自己的自定义值覆盖了一些Bootstrap的CSS属性。
首先，我们在/css文件夹中创建一个名为app.css(或任何你想要的)的新文件。然后我们打开index.html并链接到新的CSS文件。这个新CSS文件的链接应该包含在Bootstrap的CSS文件的链接下面:
<!-- bootstrap 3.3.7 -->
<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css" />
<!-- 自定义 css -->
<link rel="stylesheet" href="css/app.css" />让我们添加一个Bootstrap按钮
<div class="container">
<a href="#" class="btn btn-primary btn-lg">Big Fat Button</a>
</div>如图所示
我们将使用它展示如何对其默认设计进行一些更改:
- 从这个按钮上删除圆角
- 改变填充量
- 调整字体大小
- 改变背景颜色
让我们使用开发工具来检查这个按钮。我们将使用Chrome，如图5.2所示，但是您可以使用任何类似的工具，比如Firefox中的Firebug。填充、字体大小和边界半径等属性来自btn类，而属性背景则应用于类btn-primary。要修改它们，我们需要在CSS文件app.css中使用相同的选择器重写属性。
打开app.css加入下列CSS代码:
.btn{
border-radius: 0;
padding: 5px 10px;
font-size: 16px;
}
.btn-primary{
background: #63AEF0;
}如果我们刷新页面，我们的按钮应该看起来像下图
注意，我们使用了Bootstrap类btn和btn - primary来覆盖CSS样式。从此以后，每当您使用Bootstrap的按钮组件时，它将会有一个类似于上图的更改样式。要还原回原来的样式，我们只需从app. CSS文件中删除CSS样式。
如果您想要更改web页面中仅一个特定按钮的样式，而不是针对Bootstrap的选择器，请使用ID来应用CSS更改。