Bootstrap简介

最新推荐文章于 2025-10-12 23:36:57 发布

原创最新推荐文章于 2025-10-12 23:36:57 发布 · 824 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

1.2 前端类库与框架

框架，库lib library，从第三方引入的包，把常用的功能预先写好至一些文件（.js或.css等）。jQuery作为一个框架，提供一套比较便捷的操作DOM的方式。

What：Bootstrap，含义是引导指令、引导程序，是一个词，不是合成词BootStrap。Bootstrap是前端框架（界面工具集），是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的。

Why：生态圈火（关注和维护），不断地更新迭代；提供一套美观大方的界面组件，提供一套优雅的html+CSS编码规范，让Web开发更简单快捷。

使用Bootstrap构建的网站https://mobirise.com/ https://snappa.io/ http://expo.getbootstrap.com/ http://expo.bootcss.com/

版本

目前市面上使用最多的是3.x.x版本。

2.3.2版本，2013年后停止维护，支持更广泛的浏览器（IE7），代码不够简洁，功能不够强大；

3.x.x版本，目前最新的稳定版本，不支持IE7和早期的Firefox，IE8支持，但效果不好；

2015年8月发布4.0.0-alpha内部测试。

下载

下载Bootstrap：bootstrap-3.3.7-dist.zip，解压后使用其中的css、js、fonts

下载源码：bootstrap-3.3.7.zip

https://v3.bootcss.com/getting-started/

引入

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 设置浏览器的兼容模式版本，如果在IE浏览器下则使用最新的渲染引擎工作 -->
    <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核心CSS文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- html5shiv和respond是为了让IE8支持html5元素和媒体查询功能 -->
    <!-- 警告：通过file://协议（直接将html页面拖拽到浏览器中）访问页面时respond.js不起作用 -->
    <!-- 条件注释，当条件满足时，执行注释中的html代码，不满足则当作注释忽略 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello World!</h1>

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