前面的话bootstrap是简单、灵活的用于搭建web页面的html、css、javascript的工具集。bootstrap基于html5和css3,具有漂亮的设计、友好的学习曲线、卓越的兼容性,还有12列响应式栅格结构,丰富的组件等等。按照官网的宣传来说,bootstrap 是最受欢迎的 html、css 和 js 框架,用于开发响应式布局、移动设备优先的 web 项目。本文将介绍bootstrap概述
引入在传统前端开发过程中,常常出现重复、复杂、无意义地命名,结构冗余、胡乱嵌套,页面错乱等问题
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--bootstrap。bootstrap由mark otto和jacob thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于bootstrap建设的网站:界面清新、简洁,要素排版利落大方
bootstrap最新版本是bootstrap4,稳定版本是bootstrap3,兼容低版本ie的版本是bootstrap2
bootstrap基于html5和css3,其大量的javascript插件都依赖 jquery,且jquery的版本不能低于1.9.1版本
特性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 主题中使用到了这些图标
【bootstrap 源码】
bootstrap 源码包含了预先编译的 css、javascript 和图标字体文件,并且还有 less、javascript 和文档的源码。具体来说,主要文件组织结构如下:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目录分别包含了 css、js 和字体图标的源码。dist/ 目录包含了上面所说的预编译 bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件,examples/ 目录是 bootstrap 官方提供的实例工程。除了这些,其他文件还包含 bootstrap 安装包的定义文件、许可证文件和编译脚本等。
基本模板<!doctype html><html lang="zh-cn">
<head><!-- utf-8编码--><meta charset="utf-8"><!-- 在ie运行最新的渲染模式--><meta http-equiv="x-ua-compatible" content="ie=edge"><!--视口viewport设置--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><title>bootstrap 101 template</title><!-- 引入bootstrap --><link href="css/bootstrap.min.css?1.1.11" rel="stylesheet"><!-- 在ie8-浏览器中,支持html5新标签和媒体查询@media--><!--[if lt ie 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js?1.1.11"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js?1.1.11"></script>
<![endif]-->
</head>
<body><h1>你好,世界!</h1><!-- 先引入jqurey,再引入bootstrap插件 --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="js/bootstrap.min.js?1.1.11"></script>
</body></html>
以上就是什么是bootstrap?bootstrap的用法介绍的详细内容。