Bootstrap基本使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap基本使用相关的知识，希望对你有一定的参考价值。
参考技术ABootstrap是当前流行的前端框架。下面，我们来看看Bootstrap的基本使用吧。
- 01
Bootstrap中文网
在浏览器中输入【Bootstrap中文网】，然后点击相关的链接，如下图所示：
Bootstrap中文文档
然后会进入相关的页面，点击【Bootstrap中文文档】按钮，如下图所示：
下载Bootstrap
然后点击【下载Bootstrap】按钮，如下图所示：
Bootstrap教程
下载相关文档之后就可以使用文档中的JS文件，然后在浏览器中输入【Bootstrap教程】，即可学习简单的Bootstrap使用方法。
详解Bootstrap实现基本布局的方法
看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。
1. 创建基本的页面
我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。
1.1 新建一个文件， Ctrl + N
1.2 保存到页面文件中，Ctrl + S，命名为 index.html
1.3 在这个空白页面中，输入 html:5，然后直接按制表键 Tab，就应该可以看到一个基本的 HTML5 模板页面了。
1.4 再次保存，按 Ctrl + S.
页面内容应该如下：
|
1 2 3 4 5 6 7 8 9 10 |
|
2. 添加 Bootstrap 文件引用
在 index.html 文件所在的文件夹中，创建 css 文件夹，用来保存所有的样式文件，在 css 子文件夹中创建一个名为 bootstrap 的文件夹，用来保存我们的 bootstrap 文件。
从 bootstrap 官网可以下载到 bootstrap 的包，其中有一个 dist 的文件夹，这个文件夹中包含了三个子文件夹：css, font 和 js。将这三个子文件夹复制到你的 css/bootstrap 文件夹中。
在页面中会涉及两部分内容，样式和脚本。
2.1 添加样式引用
在 header 中添加 bootstrap 的样式引用。注意路径。
|
1 2 |
|
bootstrap.min.css 是 bootstrap 的样式文件，包含了所有的 bootstrap 样式定义，bootstrap-theme.min.css 则是主题定义。
2.2 添加脚本引用
由于 bootstrap 使用了 jQuery 的脚本，所以，你还需要下载 jquery 脚本库。
在你的 index.html 文件所在目录中，创建一个名为 lib 的子目录，用来保存以后使用的脚本库，将下载得到的 jquery.min.js 复制到这个目录中。
在紧邻你的 </body> 之间添加 jquery 和 bootstrap 脚本库引用。
|
1 2 3 |
|
3. 添加 bootstrap 容器
bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的p框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。
.container-fluid 则是一个全宽的容器，使用整个宽度。
以上是关于Bootstrap基本使用的主要内容，如果未能解决你的问题，请参考以下文章
Flask干货：Bootstrap的基本使用——Bootstrap简介