原文地址：https://wwwblogs/haogj/p/4980353.html

文章目录

  • 最终结果：
  • 创建基本的页面
  • 添加 Bootstrap 文件引用
    • 添加样式引用
    • 添加脚本引用
  • 添加 bootstrap 容器
  • 三明治菜单导航
  • 内容和边栏
  • 侧边栏导航

最终结果：

创建基本的页面

<!DOCTYPE html> 
<html lang="en"> 
    <head>
   	 <meta charset="UTF-8">
   	 <title>Document</title>
    </head>
    <body></body> 
</html>

添加 Bootstrap 文件引用

添加样式引用

在 header 中添加 bootstrap 的样式引用。注意路径。

<!--样式文件-->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>  
<!--主题定义-->
<link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>

添加脚本引用

由于 bootstrap 使用了 jQuery 的脚本，所以，你还需要下载 jquery 脚本库。
在紧邻你的 之间添加 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>

添加 bootstrap 容器

container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。
优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。
.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>

三明治菜单导航

1.button元素中，data-target="#navbar-menu" 实现此功能。点击三明治按钮的时候，显示导航。这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。
2.使用 nav 元素可以创建导航，在 bootstrap 中，导航条称为 navbar
3.navbar 会帮助我们创建导航条，默认是白色的底色，navbar-inverse 设置反白，这样底色会是黑色，文字会是白色，比较醒目。
4.ul 是实际的导航内容，其中的 .nav 说明这是一组导航，.navbar-nav 说明是用于 navbar 中的导航。
5. li 则是实际的导航项目，可以使用 .active 用来说明当前活动的导航。

<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
    <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 来进行布局。

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

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

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

侧边栏导航

在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .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】实现 Bootstrap 基本布局