此例子来自Bootstrap官网提供的入门级模版。只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素。
引入Bootstrap
创建一个web项目,本教程采用Intellij创建web项目,详情参考:IntelliJ IDEA 14 创建Web项目
在web目录下创建css目录,在css目录下创建boostrap目录,将压缩版的css文件bootstrap.min.css 复制到此目录下。
添加内容
在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>