Bootstrap入门学习(三)——简单项目

简介: Bootstrap入门学习(三)——简单项目

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


引入Bootstrap

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


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


image.png

image.pngimage.pngimage.png

添加内容

在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>

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

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

image.png

目录
相关文章
|
开发框架 前端开发 JavaScript
Bootstrap怎么搭建?导进JS项目?怎么用?是什么?(前端开发框架)
Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集,它简洁灵活,使得web开发更加的便捷.Bootstrap 由 Mark Otto 和 Jacob Thornton 在上开发,并于年 8 月 在 GitHub 上作为开源产品发布。
|
前端开发 JavaScript
Bootstrap 入门学习
Bootstrap 入门学习
72 0
|
Java 关系型数据库 MySQL
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
|
缓存 资源调度 前端开发
Bootstrap相关优质项目学习清单
Bootstrap相关优质项目学习清单
47 0
|
前端开发 JavaScript
BootStrap基础学习
BootStrap基础学习
63 0
|
前端开发 网络协议 API
学习Netty BootStrap的核心知识,成为网络编程高手!
学习Netty BootStrap的核心知识,成为网络编程高手!
190 0
|
JSON 前端开发 JavaScript
地图集web项目_技术学习(二)_bootstrap分页的例子
地图集web项目_技术学习(二)_bootstrap分页的例子
127 0
|
监控 前端开发
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
|
前端开发
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
|
前端开发
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结