Bootstrap入门学习（三）——简单项目

程序新视界

发布于 2022-11-30 16:09:28

7600

发布于 2022-11-30 16:09:28

文章被收录于专栏：丑胖侠丑胖侠

此例子来自Bootstrap官网提供的入门级模版。只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。

引入Bootstrap

创建一个web项目，本教程采用Intellij创建web项目，详情参考：IntelliJ IDEA 14 创建Web项目

在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件bootstrap.min.css 复制到此目录下。

在index.jsp中引入样式，在head中添加下面代码：

<!--响应式布局，自适应物理配置，initial-scale设置为1：完全不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap样式-->
<link rel="stylesheet" href="css/boostrap/bootstrap.min.css">

添加导航栏

添加导航栏完全采用Bootstrap提供的样式，配合注释查看，详情见代码：

<!--navbar指定此nav为导航栏，navbar-inverse指定导航的样式，navbar-fixed-top指定导航栏的位置-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <!--container 导航栏容器-->
      <div class="container">
        <!--navbar-header 头部，设置项目名称或logo-->
        <div class="navbar-header">
          <!--设置项目名称或logo-->
          <a href="#" class="navbar-brand">Project name</a>
        </div>
        <!--其他导航，指定几行几个内容-->
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav">
            <!--active 表示默认选中，添加a标签，代表可选中-->
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

显示效果如下图：

添加内容

在nav标签同级下面添加显示内容的div，代码如下：

<!--以下为内容区域-->
    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
    </div>

显示结果如下图：

此时会发现导航栏将内容遮挡住了，需通过css样式进行控制。

<!--为了防止导航栏将内容遮挡住，添加此行样式-->
    <style>
      body {
        padding-top: 50px;
      }
      .starter-template {
        padding: 40px 15px;
        text-align: center;
      }

    </style>

加上此代码之后，显示效果如下：