Bootstrap 3 - 0 - Getting started

最新推荐文章于 2023-06-20 09:00:10 发布

qq1214379009

最新推荐文章于 2023-06-20 09:00:10 发布

阅读量358

点赞数

分类专栏： bootstrap3 文章标签： bootstrap

bootstrap3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Getting started

这是一个 Bootstrap 的一个概述, 如何去下载和使用, 基本模版和例子, 以及更多其他内容.

下载

Bootstrap(当前稳定版为 v3.3.7)有一些快速入门的方法, 每一个都针对于不同的技术水平和用例. 通过阅读来发现哪个适合你的实际需求.

https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
预编译和最小版的CSS, JavaScript 以及字体. 不包含文档以及源文件.

https://github.com/twbs/bootstrap/archive/v3.3.7.zip 在docs中有Less,
JavaScript, 字体文件. 需要一个Less编译器以及一些启动项.

https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
Bootstrap从Less转向Sass以至于便于导入到Rails, Compass 或单一Sass工程.

Bootstrap CDN

MaxCDN 提供 Bootstrap CSS 以及 JavaScript CDN加速. (国内使用中文网提供的链接)

<!-- 最新预编译和最小版CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的主题 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新预编译和最小版JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bower安装

你也可以通过使用Bower来安装和管理Bootstrap的less, CSS, JavaScript和字体:

$ bower install bootstrap

Install with npm

你也可以通过使用npm来安装Bootstrap:

$ npm install bootstrap@3

Bootstrap依赖于jQuery插件, 你应当将jQuery插件置于Bootstrap的js上边.

Bootstrap的 package.json 文件包含了一些额外的媒体数据,它们分别如下:
1. less - Bootstrap的主Less 源文件的路径
2. style - Bootstrap的非最小化的已使用默认设置被预编译的CSS(没有个性化)

使用Composer安装

你也可以通过使用Composer来安装和管理Bootstrap的less, CSS, JavaScript和字体:

$ composer require twbs/bootstrap

Less或Sass需要Autoprefixer

Bootstrap使用Autoprefixer来处理CSS vendor前缀.如果你从Less或Sass源编译Bootstrap并不使用我们的Gruntfile, 你将需要将Autoprefixer集成到你的编译过程. 如果你使用预编译的Bootstrap 或者使用我们的Gruntfile, 你将不必担心这个因为Autoprefixer 已经被集成到我们的Gruntfile中.

包含了什么

Bootstrap 可以从两种方式下载, 通过这两种方式你都会找到如下的目录和文件, 条理性组织普通的资源和提供预编译和最小版.

警告: 依赖于jQuery
请注意所有的JavaScript插件依赖于jQuery的引入, 这样正如下文所述的入门模版所描述的那样. 咨询我们的bower.json来知晓什么版本的jQuery是被支持的.

预编译版的Bootstrap

当你下载并解压了Bootstrap预编译版的文件后,你会得到如下的文件结构:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

这是Bootstrap最基本的格式: 预编译文件用于快速开发web项目. 我们提供预编译的CSS和JS bootstrap.* , 以及预编译和最小版的CSS和JS bootstrap.min.*. CSS source maps bootstrap.*.map 可以被一些浏览器开发工具使用. 字体包含了Glyphicons , 而Bootstrap 主题是可选的.

Bootstrap 源代码

Bootstrap 源代码下载包含了预编译CSS, JavaScript 以及字体资源,并包含了源Less, JavaScript 和文档.更准确的说,它包含了如下更多的资源:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/ , js/ 以及fonts/ 是我们CSS, JS 以及图标字体的源代码. dist/ 文件夹包含了所有列举在上文所说的预编译版的内容. docs/ 文件夹包含了我们的文档源代码, examples/ 包含了Bootstrap 的用例. 除了这些, 还包含了支持的包,证书信息和开发者信息.

编译CSS和JavaScript

Bootstrap 使用带有便于开发的框架的Grunt 作为它的build系统.它可以编译我们的代码,运行测试以及做更多的事情.

安装Grunt

安装Grunt之前,你需要下载并安装node.js(node.js包含了npm).npm支持node打包模块以及是通过node.js来管理项目依赖的工具.
命令行输入:
1. Install grunt-cli globally with npm install -g grunt-cli.
2. 跳转到 /bootstrap 的根目录, 然后运行npm安装. npm将会参照 package.json 文件列举的依赖自动安装.
当完成后, 你就可以在命令行运行各种支持的Grunt 命令.

可用的Grunt命令

grunt dist

(只是编译CSS和JavaScript)
重新生成 /dist 目录中的预编译以及最小版CSS和JavaScript文件.作为Bootstrap的使用者, 这是最常用的命令.

grunt watch

(监听)
监听Less源文件,并自动重新编译它们到CSS上,当你保存修改时.

grunt test

(运行测试)
运行JSHint 并在PhantomJS中运行QUnit测试

grunt docs

(Build 与 test 资源)
build 与 test CSS, JavaScript 以及其他用于通过bundle exec jekyll serve 本地运行的文档的资源.

grunt

(直接build任何东西并运行测试)
编译和最小化CSS, JavaScript, 建立文档站点, 对docs运行 HTML5 validator , 重新生成个性化配置, 以及更多. 需要 Jekyll . 通常只有当你非法侵入了Bootstrap才需要这么做.

故障排查

当你遇到安装依赖或者运行Grunt命令之类的问题时, 首先需要删除由npm 生成的 /node_modules/ 目录。然后，重新执行 npm install .

基本模版

可以从这个HTML基本模版开始, 或者修改这些例子. 我们希望你将我们的模版个性化, 以适应你的需求.

将下面的HTML复制到一个最小的Bootstrap文档以开始工作.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上面三个meta标签必修位于头标签的开始; 其他头标签内容必须位于头标签的后面 -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 用于 IE8 的 HTML5 shim 和 Respond.js 支持 HTML5元素 和媒体需求 -->
    <!-- 警告: 如果你通过file://的路径来查看网页,Respond.js不会工作 -->
    <!--[如果是IE9的话就加入如下的js]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h1>Hello, world!</h1>
    <!-- jQuery (对于Bootstrap的 JavaScript插件来说是必须的) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- 包含了所有的编译插件(下面的js), 或者你单独引入你需要的指定插件的文件 -->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

我的基本模版

我们将上述的基本模版加以修改,日后使用这个模版

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <h1>Hello, world!</h1>
    <!-- jQuery v2.1.4 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>