您的位置: 首页  >  文章  >  走向单体地狱（三）：Bootstrap前端框架

走向单体地狱（三）：Bootstrap前端框架

分类: 文章 • 2024-10-13 10:55:04

文章目录

Bootstrap 简介

概述

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。

为什么使用 Bootstrap？

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。
  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件，易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

Bootstrap 包的内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
  • CSS：Bootstrap 自带以下特性，全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
  • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

Bootstrap 环境安装

概述

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

文件结构

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

走向单体地狱（三）：Bootstrap前端框架

如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

实例

现在让我们尝试使用 Bootstrap 输出 “Hello, world!”：

<h1>Hello, world!</h1>

Bootstrap 网格系统

概述

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

什么是网格（Grid）？

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

  • 内容

    • 决定什么是最重要的
    • 布局

  • 优先设计更小的宽度

    • 基础的 CSS 是移动设备优先，媒体查询 是针对于平板电脑、台式电脑
    • 渐进增强

  • 随着屏幕大小的增加而添加元素

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
走向单体地狱（三）：Bootstrap前端框架

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
  • 使用行来创建列的水平组
  • 内容应该放置在列内，且唯有列可以是行的直接子元素
  • 预定义的网格类，比如 .row和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第一列和最后一列的行偏移
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

说明 超小设备手机 （< 768px）小型设备平板电脑（≥ 768px ） 中型设备台式电脑（≥ 992px） 大型设备台式电脑（≥ 1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

媒体查询的用法

@media媒体查询的用法

媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

浏览器支持

表格中的数字表示支持@media规则的第一个浏览器的版本号

Chrome IE Firefox Safari Opera
21 9 3.5 4.0

媒体类型

媒体类型在 CSS2 中是一个常见属性，可以通过媒体类型对不同设备指定不同样式。

  • ALL：所有设备
  • Braille：盲人用点子法触觉回馈设备
  • Embossed：盲文打印机
  • Handheld：便携设备
  • Print：打印用纸或打印预览视图
  • Projection：各种投影设备
  • Screen：电脑显示器
  • Speech：语音或音频合成器
  • Tv：电视机类型设备
  • Tty：使用固定密度字母栅格的媒介，比如电传打字机和终端
    Screen、All、Print 为最常见的三种媒体类型。

媒体特性

媒体查询中的大部分接受 min/max前缀，用来表达其逻辑关系，表示应用大于等于或小于等于某个值的情况。没有特殊说明都支持 min/max。

  • width：Length 渲染界面的宽度
  • height：Length 渲染界面的高度
  • color：整数，表示色彩的字节数
  • color-index：整数， 色彩表中的色彩数
  • device-aspct-ratio：整数/整数，宽高比例
  • device-height：Length 设备屏幕的输出高度
  • device-width：Length 设备屏幕的输出宽度
  • grid（不支持min/max 前缀）：整数，是否基于栅格的设备
  • monochrome：整数，单色帧缓冲器中每像素字节数
  • resolution：分辨率（dpi/dpcm）分辨率
  • scan（不支持min/max 前缀）：Progressive interlaced，Tv 媒体类型的扫描方式
  • orientation（不支持min/max前缀）：Portrait//landscape 横屏或竖屏

使用媒体查询

语法：@media 媒体类型 and (媒体特性) {你的样式}

最大宽度

max-width是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px) {
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于 480px 时，页面中包含类样式 .ads的元素都将被隐藏。

最小宽度

min-width与 max-width 相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width: 900px) {
    .wrapper {width: 980px;}
}

上面表示的是：当屏幕大于或等于 900px 时，页面中包含类样式.wrapper 元素的宽度为 980px。

多个媒体特性的使用

媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说，一个媒体查询中可以包含 0 到多个表达式，表达式又可以包含 0 到多个关键字，以及一种媒体类型。

当屏幕在 600px~900px 之间时，body 的背景色渲染为 #F5F5F5 ，如下所示：

@media screen and (min-width:600px) and (max-width:900px) {
  body {background-color:#F5F5F5;}
}

Bootstrap 表格

概述

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签 描述
<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>），用来标识表格列
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或<th>）
<td> 默认的表格单元格
<th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在<thead>内使用
<caption> 关于表格存储内容的描述或总结

表格类

下表样式可用于表格中：

类 描述
.table 为任意 <table>添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody>内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

<tr>, <th> 和<td>类

下表的类可用于表格的行或者单元格：

类 描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

<table class="table">
  <caption>基本的表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

Bootstrap 字体图标

什么是字体图标

所谓字体图标，就是使用字体（Font）格式的字形做成了图标。

Bootstrap 自带的字体图标

Bootstrap 捆绑了 200 多种字体格式的字形，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff
    相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

使用字体图标

如需使用图标，只需要简单地使用下面的代码即可：

<span class="glyphicon glyphicon-search"></span>

其它字体图标库

相关推荐