首页
所有分类
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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
理解javascript封装
Feb 23 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
XPathParser(1) macos(1) Sentry(1) csgo(1) CAD(1) Stater(1) 404(1) xps(1) sout(1) 403(1)
You might like
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
jquery实现提示语淡入效果
2017/05/05 jQuery
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python中static相关知识小结
2018/01/02 Python
python关闭占用端口方式
2019/12/17 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
Tiqets荷兰：出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国现代家具购物网站：LexMod
2019/01/09 全球购物
数组越界问题
2015/10/21 面试题
校庆活动方案
2014/03/31 职场文书
三严三实对照检查材料
2014/08/25 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
学生会干部任命书
2015/09/21 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript