05.Bootstrap导入基础笔记

Bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

为什么要使用Bootstrap？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。

Bootstrap下载

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

Bootstrap文件结构

目录结构：

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件├── bootstrap.js├── bootstrap.min.js  // 核心JS压缩文件└── npm.js

实际需要文件，删除CSS,js内不用文件

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件├── bootstrap.min.js  // 核心JS压缩文件

Bootstrap文件导入

相当于导入CSS和JS

<!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>title</title><!-- Bootstrap --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="jquery-3.2.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="bootstrap/js/bootstrap.min.js"></script></body>
</html>

组件介绍

支持移动端

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

Normalize.css

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css.

访问BootCDN,搜寻Normalize.css

<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">

图标网站

Bootstrp

https://v3.bootcss.com/components/

font awesome

http://fontawesome.dashgame.com/

实际通常用BootCDN链接即可

命令组件参考网站

https://v3.bootcss.com/css/

https://www.cnblogs.com/liwenzhou/p/8214637.html

部分摘抄：https://www.cnblogs.com/liwenzhou/p/8214637.html