前端框架之Bootstrap学习

安全开发

Word count: 864Reading time: 3 min

 2020/10/13 

排版
组件
- Bootstrap图标
js插件
Reference

学习记录

标签 name=”viewport” 详解

排版

Bootstrap概述

　　在前端世界，有个叫Bootstrap的家伙，，是twitter 开源出来的一套前端框架，利用Ta可以快速开发网站界面，它的特点就是比自己从头写简单，直观，方便，快捷，省劲。

　　凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后我们才开始干活！

　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML，CSS，JavaScript的前端框架，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师Mark Otto 和 Jacob Thornton 合作开发，是一个CSS / HTML 框架。Bootstrap提供了优雅的 HTML 和CSS规范，它是由动态的CSS语言Less写成的。

它用于开发响应式布局、移动设备优先的 WEB 项目。

　我们去bootcdn （https://www.bootcdn.cn/ ）。会发现Bootstrap是星最多的前端框架之一。

特性

响应式设计
栅格布局
完整的类库
jQuery插件
不同的使用场景

包含文件

Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。

【预编译版】

　　下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── 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

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。