详解Bootstrap实现基本布局的方法
看到了一篇 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 |
|
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实现基本布局的方法的更多相关文章
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 详解Webwork中Action 调用的方法
详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...
- MySQL关闭过程详解和安全关闭MySQL的方法
MySQL关闭过程详解和安全关闭MySQL的方法 www.hongkevip.com 时间: -- : 阅读: 整理: 红客VIP 分享到: 红客VIP(http://www.hongkevip.co ...
- 详解PHP设置定时任务的实现方法
详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...
- 详解Bootstrap按钮组件
按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮 ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
- 详解Java中的Object.getClass()方法
详解Object.getClass()方法,这个方法的返回值是Class类型,Class c = obj.getClass(); 通过对象c,我们可以获取该对象的所有成员方法,每个成员方法都是一个Me ...
- 详解JavaScript中的arc的方法
今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...
随机推荐
- 2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践 1.基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 下载自己不熟悉的软件时含有病毒. 网络钓鱼, ...
- service order
1: SRVO Service Order compress: 本地部署,客户能够看到后台代码,transaction type,改代码等. SVO1 Service Order ...
- JS 变量和函数提升 全局变量和局部变量
变量提升 1. var a = 10; function test() { a = 100; console.log(a); console.log(this.a); var a; console.l ...
- python3.6安装docx模块
1.下载 python_docx-0.8.6-py2.py3-none-any.whl 地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/2.在这个网页的最下 ...
- python迭代-如何在一个for语句中迭代多个可迭代对象
如何在一个for语句中迭代多个可迭代对象 问题举例 (1)某班学生期末考试成绩,语文,数学,英语分别存储在3个列表中,同时迭代三个列表,计算每个学生的总分 (2)某年级有4个班,某次考试每班英语成绩分 ...
- django框架配置mysql数据库
django配置mysql数据库: 1.首先更改django项目文件中的settings.py的数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.d ...
- zabbix监控实战<2>----zabbix-server的安装与部署
第一章 zabbix-server的安装与部署 1.1 环境部署 eth0 eth1 master 10.0.0.71 ...
- Setting NLS_LANG Value for Oracle
Introduction Many times, when you have an Oracle application and you have to support special charact ...
- Redis哨兵模式（sentinel）部署记录（主从复制、读写分离、主从切换）
部署环境: CentOS7.5 192.168.94.11 (master) 192.168.94.22 (slave0) 192.168.94.33 (slave1) 192.168.94.44 ...
- 极致21点开发DAY4
完成的内容:1.修改上一篇博文中的Bug 2.完成任务窗口逻辑 using System; using System.Collections.Generic; using UnityEngine; ...