JavaEE知识篇(8-25)——bootStrap

最新推荐文章于 2023-10-24 22:20:20 发布

渐醒的思考者

最新推荐文章于 2023-10-24 22:20:20 发布

阅读量361

点赞数 2

CC 4.0 BY-SA版权

分类专栏： notes demo javaee bootstrap

本文链接：https://blog.youkuaiyun.com/jiangyi_1612101_03/article/details/89041665

本文详细介绍了BootStrap作为WEB前端CSS框架的基本概念、环境搭建步骤，以及如何利用BootStrap实现商城首页的响应式布局。通过响应式布局的概念，展示了BootStrap在不同终端的适应性。文章提供了BootStrap中文官网链接，下载地址，目录结构，布局容器，栅格系统，按钮设计以及响应式工具的使用，并给出了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文旨在记录学习bootStrap响应式效果，具体开发时需要更具bootStrap开发手册。

文章目录

1.BootStrap简介（WEB前端CSS框架）

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
BootStrap的详细简介
中文官网：http//www.bootcss.com/
响应式布局简介
响应式布局：一个网站能够兼容多个终端（手机，iPad等），而不需要位每一个终端做一个特定的版本。

2. 环境的搭建：

bootStrap下载：
https://v3.bootcss.com/
目录结构：
内容结构：
在dist文件中

bootstrap/
├── css/
│   ├── bootstrap.css							//预定义的css文件
│   ├── bootstrap.css.map					//css与less源码对应的文件
│   ├── bootstrap.min.css					//压缩文件
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css				//主题文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/					//字体（字体图标）
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

简洁模板：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3. 实现商城首页的预备知识：

布局容器：
帮助手册：https://v3.bootcss.com/css/#overview-container
栅格：
帮助手册：https://v3.bootcss.com/css/#grid
按钮：
帮助手册：https://v3.bootcss.com/css/#buttons

代码实现：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for inf