Jump Start Bootstrap 第1章

Bootstrap 官网地址 原文出处

什么是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>

如图所示

我们将使用它展示如何对其默认设计进行一些更改:

  1. 从这个按钮上删除圆角
  2. 改变填充量
  3. 调整字体大小
  4. 改变背景颜色

让我们使用开发工具来检查这个按钮。我们将使用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更改。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王大锤

iOS各种调试技巧豪华套餐

43790
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

17.1K150
来自专栏前端说吧

CSS3-box-flex弹性盒布局

37880
来自专栏tkokof 的技术,小趣及杂念

Dev-C++,Time to say goodbye ?(更新2012-02-04)

  记得在那段很久以前的学生时代,自己曾经很反感Visual Studio的过度臃肿,再加上当时学校的实验PC陈腐老旧:经常假死的Windows 2000,外加...

12620
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

11330
来自专栏小狼的世界

JavaScript Mobile开发框架汇总

目前Javascript移动开发框架有些共同的特点:专门为移动设备做了优化,提供标准的UI组件;提供跨平台的支持(Android、IOS、etc);轻量级,由于...

18130
来自专栏DeveWork

为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文...

43890
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

41230
来自专栏前端大白专栏

react 在使用数据请求的时候和setState的时候哪个先处理

20850
来自专栏腾讯开源的专栏

【开源公告】通用 Web 组件化框架 Omi 正式开源

Omi 从 3.0 开始基于 preact 二次开发,完全可以共享 preact 和 react 的生态,也有了自己独特的风格和优势。

7.5K70

扫码关注云+社区

领取腾讯云代金券