看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用bootstrap教程实现一下，将涉及的内容也尽可能详细说明。

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

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

</head>

<body>

  

</body>

</html>

2. 添加 Bootstrap 文件引用

在 index.html 文件所在的文件夹中，创建 css 文件夹，用来保存所有的样式文件，在 css 子文件夹中创建一个名为 bootstrap 的文件夹，用来保存我们的 bootstrap 文件。

从 bootstrap 官网可以下载到 bootstrap 的包，其中有一个 dist 的文件夹，这个文件夹中包含了三个子文件夹：css, font 和 js。将这三个子文件夹复制到你的 css/bootstrap 文件夹中。

在页面中会涉及两部分内容，样式和脚本。

2.1 添加样式引用
在 header 中添加 bootstrap 的样式引用。注意路径。

1

2

<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>

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

<script type="text/javascript" src="lib/jquery.min.js"></script>

 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>

</body>

3. 添加 bootstrap 容器

bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的p框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。

.container-fluid 则是一个全宽的容器，使用整个宽度。

详解Bootstrap实现基本布局的方法的更多相关文章

  1. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  2. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  3. 详解Webwork中Action 调用的方法

    详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...

  4. MySQL关闭过程详解和安全关闭MySQL的方法

    MySQL关闭过程详解和安全关闭MySQL的方法 www.hongkevip.com 时间: -- : 阅读: 整理: 红客VIP 分享到: 红客VIP(http://www.hongkevip.co ...

  5. 详解PHP设置定时任务的实现方法

    详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...

  6. 详解Bootstrap按钮组件

    按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css    3131行~3291行 按钮 ...

  7. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

  8. 详解Java中的Object.getClass()方法

    详解Object.getClass()方法,这个方法的返回值是Class类型,Class c = obj.getClass(); 通过对象c,我们可以获取该对象的所有成员方法,每个成员方法都是一个Me ...

  9. 详解JavaScript中的arc的方法

    今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...

随机推荐

  1. oracle DML语句 事务的定义与特点

    1.insert into (插入数据) insert in to  表名(列表1,列表2)    values(要插入的数据1,数据2); or insert into 表名   values(数据 ...

  2. 《HTTP - 跨域》

    本文参考 HTTP访问控制(CORS) 一:什么是跨域? - 所谓跨域, 是浏览器为了保护网站安全而建立的一种保护策略,既浏览器的同源策略. - 意味着使用这些API的Web应用程序只能从加载应用程序 ...

  3. AES加密的S盒和逆S盒的推导代码备份(C实现)

    摘取自https://www.cnblogs.com/Junbo20141201/p/9369860.html,感谢原作者的详细解读. #include <stdio.h> ][] = { ...

  4. 温习排序算法（基于C指针）

    以前学过的数据结构课,貌似已经忘得一干二净了,偶然又翻起,书中最后一章详细介绍了7种排序算法,现在对其中4种做个总结.(为啥只总结4种,当然是因为偷懒,只想总结简单又常用的!) 先贴一张排序分类图: ...

  5. webpack(3)-管理资源

    管理资源:(file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录) 加载css:style-loader.css-loader 以style的形式插入到he ...

  6. btcpool之JobMaker

    一.简介 JobMaker从kafka消息队列接收rawgbt消息,然后解码该消息中的gbt数据,生成Job,发送到kafka消息队列. 二.StratumJob结构 StratumJob结构是Job ...

  7. Ubuntu16.04调整屏幕分辨率至1920*1080

    安装好ubuntu 16.04桌面版后,发现屏幕分辨率调整选项里没有1920*1080这一选项,经过一番查找,可通过如下方式进行屏幕分辨率设置.以下操作均在ubuntu 16.04桌面版操作,不要用远 ...

  8. 安卓微信端打开H5页面背景图被键盘挤压移动位置解决

    问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...

  9. 用php实现表格

    <?php $contact2 =[ ['江苏'=>['华罗庚','河南','童第周']], ['河南'=>['童第周','华罗庚','河南']], ['河北'=>['刘恒', ...

  10. Go 初体验 - 反射

    首先,反射虽强大, 但不可乱用,会有性能损耗 直接上代码: 输出: 代码并不难理解,不做解释