详解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 ...
随机推荐
- WSL（Windows Subsystem for Linux)笔记一安装与使用
1.安装linux子系统 很简单直接在启动或关闭windows功能 中选择“适用于linux的windows子系统”,确定安装后重启即可,安装还是比较快的只用了几分钟. 也可以直接使用shell命令行 ...
- 04.常量变量和数据类型（const）
1.关键字 2.数据类型 告诉编译器定义一个类型变量的空间! 3.常量 4.变量 在程序运行过程中,值可以改变 变量在使用前必须先定义,定义变量前必须有相应的数据类型 标识符命名规则: (1).标识符 ...
- rpc轻量级框架实例
- 学号20175313 《实现Linux下cp XXX1 XXX2的功能(二)》第九周
目录 MyCP2 一.题目要求 二.题目理解 三.需求分析 四.设计思路 五.伪代码分析 六.代码链接 七.代码实现过程中遇到的问题 八.运行结果截图 九.心得体会 十.参考资料 MyCP2 一.题目 ...
- Python博客目录
python基础 1.helloworld 2.运算符&while循环 3.pycharm安装&for循环&format字符串&list列表&set集合使用 4 ...
- ESP8266 RTOS SDK烧写环境构建
简介 esptool是一个Python软件程序,适用于ESP8266等一系列芯片的烧写,灵活高效. 环境构建 在官网下载安装最新2.7版python (linux和os x一般会自带python2.7 ...
- linux 消息队列
消息队列,这个可是鼎鼎大名,经常在某些地方看见大家那个膜拜,那个,嗯,那个... 那就给个完整的例子,大家欣赏就行,我一直认为不用那个,嗯@ 这个队列的最大作用就是进程间通信,你要非搞个持久化,那也行 ...
- java支付宝接口开发
在线支付接入支付宝,首先需要去官网申请开发者账号,具体步骤如下: 一.打开官网 1.直接打开链接https://open.alipay.com/platform/home.htm进入 2.百度搜索蚂蚁 ...
- Linux系统——MHA-Atlas-MySQL高可用集群
Linux系统——MHA-Atlas-MySQL高可用集群 MHA MHA介绍MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,是一套优秀的 ...
- （.NET高级课程笔记）反射总结
反射总结 1.dll-IL-matadata-反射 2.反射加载dll,获取module.类.方法.特性 3.反射创建对象:反射+简单工厂+配置文件 4.反射调用实例方法.静态方法.重载方法.私有方法 ...