SpringBoot笔记系列:(十五)集成Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

1.Bootstrap 简介

1.1.Bootstrap是什么?

  • 基于HTML、CSS、JavaScript的前端框架
  • 响应式布局
  • 移动设备优先

1.2.HTML5 doctype


    
    <html lang="en">
    ...
    html>

1.3.响应式meta标签


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

1.4.Normalize.css

  • 使用Normalize来建立跨浏览器的一致性
  • Reboot

2.Bootstrap 核心概念

2.1.Bootstrap网格系统

什么是移动设备优先策略呢?

  • 基础的CSS是移动优先。优先设计更小的宽度
  • 媒体查询。针对于平板电脑、台式电脑
  • 渐进增强。随着屏幕大小的增加而添加元素

2.2.响应式:viewport尺寸的增加,系统会自动分为最多12列

SpringBoot笔记系列:(十五)集成Bootstrap_第1张图片

2.3.Bootstrap网格选项

SpringBoot笔记系列:(十五)集成Bootstrap_第2张图片

2.4.Bootstrap网格示例

移动设备及桌面设备 .col-xs-* 、 .col-md-*

示例1:

SpringBoot笔记系列:(十五)集成Bootstrap_第3张图片

效果1:

SpringBoot笔记系列:(十五)集成Bootstrap_第4张图片

示例2:

SpringBoot笔记系列:(十五)集成Bootstrap_第5张图片

效果2:

SpringBoot笔记系列:(十五)集成Bootstrap_第6张图片

示例3:

SpringBoot笔记系列:(十五)集成Bootstrap_第7张图片

效果3:

SpringBoot笔记系列:(十五)集成Bootstrap_第8张图片

2.5.Bootstrap常用组件、样式:

  • Typography
  • Table
  • Form
  • Button
  • Dropdown
  • ButtonGroup
  • Input Group
  • Navbar
  • Pagination
  • Tag
  • Alert
  • ModalDialog
  • Progress Bar
  • List Group
  • Card
  • Tooltip

3.Bootstrap 及常用前端框架与Spring Boot集成

3.1.从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本

SpringBoot笔记系列:(十五)集成Bootstrap_第9张图片

3.2.将Bootstrap文件解压到SpringBoot的static目录下

SpringBoot笔记系列:(十五)集成Bootstrap_第10张图片

3.3.在static中创建一个静态ceshi.html,引入Bootstrap文件


    
    <html>
    <head>
        <title>Bootstrap 模板title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
        
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        
        
        
    head>
    <body>
    <h1>Hello, world!h1>

    
    <script src="https://code.jquery.com/jquery.js">script>
    
    <script src="js/bootstrap.min.js">script>
    body>
    html>

3.4.启动服务,访问 http://localhost:8080/ceshi.html ,查看Bootstrap是否集成成功。

SpringBoot笔记系列:(十五)集成Bootstrap_第11张图片

4.Bootstrap实战

参看项目源码。

查看源码

SpringBoot笔记系列目录

你可能感兴趣的:(SpringBoot)