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个精彩的专题:

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

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python数字图像处理实现直方图与均衡化
2018/05/04 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
五年级作文之成长
2019/09/16 职场文书
Python 中random 库的详细使用
2021/06/03 Python