首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本布局实现方法详解

Posted in Javascript onNovember 25, 2016

看到了一篇 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.

页面内容应该如下：

<!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 的样式引用。注意路径。

<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 脚本库引用。

<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的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。

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

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹.

顺便还可以添加一个 title，现在你的页面应该是这样的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
 <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
 <div class="container">
 </div>
 <script type="text/javascript" src="lib/jquery.min.js"></script>
 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

虽然现在在浏览器中还看不到什么内容，但是，已经为后面的操作打好了基础。

4. 标题和导航
现在我们可以为页面添加一些可见的内容了。

4.1 标题
添加标题非常简单，直接添加一个 h1 元素就可以了。

<div class="container">
 <h1>Twitter bootstrap tutorial</h1>
 </div>

刷新页面应该看到一个醒目的标题了。下面我们看导航。

4.2 导航
使用 nav 元素可以创建导航，而且我们希望创建一个导航条来组织导航项目，在 bootstrap 中，导航条称为 navbar，继续在容器中添加导航条。

<div class="container">
 <h1>Twitter bootstrap tutorial</h1>
 <nav class="navbar navbar-inverse">
 </nav>
 </div>

navbar 会帮助我们创建导航条，默认是白色的底色，navbar-inverse 设置反白，这样底色会是黑色，文字会是白色，比较醒目。现在刷新页面，你会看到一个黑色的导航条，里面还没有任何导航内容。

添加导航内容如下

<div class="container">
 <h1>Twitter bootstrap tutorial</h1>
 <nav class="navbar navbar-inverse">
 <div class="navbar-collapse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page One</a></li>
  <li><a href="#">Page Two</a></li>
 </ul>
 </div>
 </nav>
 </div>

ul 是实际的导航内容，其中的 .nav 说明这是一组导航，.navbar-nav 说明是用于 navbar 中的导航。li 则是实际的导航项目，可以使用 .active 用来说明当前活动的导航。

注意 .navbar-collapse，它是说在视口的宽度小于 768px 的时候，将导航变成垂直方向。

大于 768px

Bootstrap基本布局实现方法详解

小于 768px

Bootstrap基本布局实现方法详解

4.3 三明治菜单

变成垂直的导航也不方便，我们希望成为流行的样式，比如这样。

Bootstrap基本布局实现方法详解

我们需要额外做一些工作，一方面，我们需要说明，在视口小于一定宽度的时候，显示出来我们的特定的导航，添加额外的导航内容。

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
</div>

其实里面是两部分组成的，button 部分看起来很多，就是用来画出右面的三明治按钮。后面的 a 元素则是左边的导航。

通常它不会显示出来。

然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

这样，我们的导航就是这样的了。

<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
 <!-- Brand and toggle get grouped for better mobile display -->
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>
 <div id="navbar-menu" class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page One</a></li>
  <li><a href="#">Page Two</a></li>
 </ul>
 </div>
</nav>
</div>

 5. 内容和边栏
主要内容部分，我们使用 div 来进行布局。

<div id="content" class="row-fluid">
 <div class="col-md-9">
  <h2>Main Content Section</h2>
 </div>
 <div class="col-md-3">
  <h2>Sidebar</h2> 
 </div>
 </div>

这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

Bootstrap基本布局实现方法详解

这张表格则给出了详细的说明。

Bootstrap基本布局实现方法详解

现在页面看起来是这样的。

Bootstrap基本布局实现方法详解 

6. 侧边栏导航
在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。

<div class="col-md-3">
 <h2>Sidebar</h2>
 <ul class="nav nav-tabs nav-stacked">
 <li><a href='#'>Another Link 1</a></li>
 <li><a href='#'>Another Link 2</a></li>
 <li><a href='#'>Another Link 3</a></li>
 </ul> 
</div>

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。 

Bootstrap基本布局实现方法详解

7. 参考资料

1. 20 分钟打造你的 Bootstrap 站点

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本布局实现方法详解

- Author -

my98800

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript将string类型转换int类型
Dec 09 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 #Javascript
Bootstrap栅格系统学习笔记
Nov 25 #Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 #Javascript
javaScript语法总结
Nov 25 #Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 #Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 #Javascript
方案(1080) 证明书(326) 保证书(97) 制度(225) 寄语(276) 评语(336) 感谢信(72) 接收函(23) 答谢词(97) 计划书(118)
You might like
main.php
2006/12/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php pdo操作数据库示例
2017/03/10 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
koa-router源码学习小结
2018/09/07 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python如何求100以内的素数
2020/05/27 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
全球最大的服务市场：Fiverr
2017/01/03 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌：Acne Studios
2017/07/09 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
自我反省检讨书
2014/01/23 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
幼师自荐信范文
2015/03/06 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
常住证明范本
2015/06/23 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript