Bootstrap是一个超级好用的前端框架

序

Bootstrap基于HTML、CSS和JAVASCRIPT，用于开发具有响应布局和移动设备优先级的WEB项目。Bootstrap在jQuery的基础上进行了更加个性化的改进，形成了自己独特的网站风格，兼容了大部分JQuery插件。让前端开发更快更简单。

基本结构：Bootstrap提供了一个带有网格系统、链接样式和背景的基本结构。

CSS:Bootstrap具有以下特性：全局CSS设置、定义基本HTML元素样式、可扩展类和高级网格系统。

组件：Bootstrap包含十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。

JavaScript插件：Bootstrap包含十几个自定义jQuery插件。您可以直接或单独包含所有插件。

定制：可以定制Bootstrap组件、LESS变量和jQuery插件来获得自己的版本。

1.引导基本模板

！DOCTYPE html html lang=' zh-CN ' head meta charset=' utf-8 '！-让浏览器使用最新的IE内核来渲染页面-meta http-equiv=' x-ua-compatible ' content=' IE=edge '！-设置视口宽度等于当前设备宽度，默认缩放比例为1-meta name=' viewport ' content=' width=device-width，initial-scale=1 '！-以上三个元标签*必须*在前面，任何其他内容*必须*跟随！-标题引导101模板/标题！-导入Bootstrap核心CSS文件-link href=' CSS/Bootstrap . CSS ' rel=' external no follow ' rel='样式表'！- HTML5垫片和Respond.js，用于IE8对HTML5元素和媒体查询的支持-！-warn : response . js如果通过文件：///-查看页面，则不起作用！- !- [if lt IE 9]……！[endif]-这对标签用于检测当前浏览器版本，lt表示小于，gt表示大写。所以这句话的作用就是在浏览器版本低于IE9的时候执行。 html5HIV:解决ie9以下浏览器无法识别HTML5新标签，导致CSS无效的问题。response . min :允许不支持css3 Media Query的浏览器，包括IE6-IE8等支持查询的浏览器。- !- [if lt IE 9]脚本src=' http :https://cdn . bootss.com/html 5 shiv/3 . 7 . 3/html 5 shiv . min . js '/脚本脚本src=' http :https://cdn . bootss.com/response . js/1 . 4 . 2/response . min . js '/脚本！[[endif]-/头身h1你好！/h1脚本src=' http : js/jquery-3 . 1 . 1 . js '/脚本！-导入BootStrap的JS插件(1)如果不使用BootStrap提供的JS插件，则不需要导入这个JS文件；BootStrap的JS插件功能依赖JQuery，所以这个JS必须在JQuery之后导入；-script src=' http : js/Bootstrap . min . js '/script/body/HTML复制粘贴上面的HTML代码，这是最简单的bootstrap页面。需要注意的是，Bootstrap的所有JavaScript插件都依赖于jQuery，所以必须在Bootstrap之前引入jQuery。

2.成分

Bootstrap包含丰富的Web组件，根据这些组件可以快速构建一个美观且功能齐全的网站。它包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航栏、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

2.1字体图标

Bootstrap默认提供200多个图标。我们可以通过span标签使用这些图标：

H3图标/H3跨度='字形