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

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

引入Bootstrap

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/boostrap/bootstrap.min.css">

添加导航栏

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

    <nav class="navbar navbar-inverse navbar-fixed-top">
      
      <div class="container">
        
        <div class="navbar-header">
          
          <a href="#" class="navbar-brand">Project namea>
        div>
        
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav">
            
            <li class="active"><a href="#">Homea>li>
            <li><a href="#about">Abouta>li>
            <li><a href="#contact">Contacta>li>
          ul>
        div>
      div>
    nav>

显示效果如下图：

添加内容

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

    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter templateh1>
        <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>

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

至此，已经完成了最简单的一个demo。此时，可以在导航栏中的a标签里面添加对应的连接，点击即可访问到对应的地址。