实现 Bootstrap 基本布局

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

小于 768px

4.3 三明治菜单

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

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

<!-- 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官方文档中拿到的图片给出了一个很好的展示。

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

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

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 的响应式布局页面就完成了。

Bootstarp 使用布局的更多相关文章

Vue 前后台交互，插件
目录 Vuex 插件前端存储数据汇总前后台交互方式(重点) axios 插件同源策略-跨域问题前后台分离项目交互流程异步请求细节 Element-ui 插件 jQ + Bs插件 Django ...
Django（图书管理系统）
图书管理系统注意事项 1.models 要创建好,规划好自己的表,以及各种表关系 2.url正则要写好 3.settings的配置 4.利用bootstarp 进行布局更漂亮哦 5.注意orm 各 ...
bootstarp 样式细节（tooltip布局）
在写bootstarp中发现的几个小样式问题,记录以后可能用的到 1.有时候我们想要超过td长度后自动显示省略号,我们会使用 table { table-layout: fixed; } table ...
WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
bootstarp布局
<!doctype html><html > <head> <meta charset="utf-8"> <link rel= ...
一步一步实现MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆（一）验证码 Captcha 之大插件小用
不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆. 前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. ...
[前端]分享一个Bootstrap可视化布局的网站
如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...
玩转Bootstarp(连载)
一.Bootstarp是什么? 简单.灵活的用于搭建WEB页面的HTML.CSS.JS的工具集 (基于HTML5和CSS3) 总结:简洁强大的前端开发框架,可以让WEB开发更迅速.更简单二.如何使用 ...
前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

随机推荐

关于SVN报错 svn: E170013 E125006: contains invalid filesystem format option 'addressing logical'
在使用svn的时候,遇到了这样的一个问题首先我使用TortoiseSVN 右键创建的repository. 之后用IDEA,配置了1.9.4版本的SVN,去commit访问这个仓库结果出现了以下的 ...
java 中类的方法
object类,即所有类的父类, getClass() 返回对象执行时的Class实例, getClass().getName();// 返回类的名字 toString();// equals();/ ...
Linux kill 命令以及USR1 信号解释
kill 中的USR信号解释 USR1亦通常被用来告知应用程序重载配置文件:例如,向Apache HTTP服务器发送一个USR1信号将导致以下步骤的发生:停止接受新的连接,等待当前连接停止,重新载入配 ...
LVS节点健康检查及管理脚本
在LVS负载均衡主节点上,模拟keepalived健康检查功能管理LVS节点,当节点挂掉从服务器池中剔除,好了再加到服务器池中来. 工具:yum install -y ipvsadm web03:10 ...
react 常见api 使用（长期更新）
1.父子通信 1.1 父-子 props 父组件: class myPage extends React.Component { render() { return ( <div> {/* ...
springboot接口返回封装与异常控制
首先,返回有两个状态,status和code status标识response的状态,有2个值:0成功,-1服务错误. code跟业务有关,可以有各种数值,99999服务未知异常,10000参数异常, ...
swoole异步群发模板消息
1.用的是TP5.1的框架,swoole分成一个客户端发送接收消息,一个服务器负责处理信息服务端代码,服务器要先安装swoole拓展,用 php server.php 启动进程监听 <?php ...
vue搭建app, M端项目流程
思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟打开cmd,使用命令行 1.切换盘符:e: 2.使用vue建立一个项目,具体请看我的 ...
基于keil平台下STM32L系列移植FreeRTOS操作系统
1,下载FreeRTOS https://www.freertos.org/a00104.html 点击下载后,会进入如下界面之后会弹出下载界面,格式为.EXE,不用怀疑.不是木马. 等待下载完成, ...
前言：JNI调用-简单使用
JNI JNI是(Java Native Interface 本地接口)是一个协议,用来沟通Java 代码和C/C++代码,是 Java和 C.C++之间的桥梁. 通过JNI协议,Java可以调用外 ...

Bootstarp 使用布局