前边的话

  Bootstrap是粗略、灵活的用来搭建WEB页面包车型客车HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具备得天独厚的设计、友好的上学曲线、特出的包容性,还有1二列响应式栅格结构,丰富的零部件等等。依据官方网址的宣扬的话,Bootstrap
是最受欢迎的 HTML、CSS 和 JS 框架,用于开辟响应式布局、移动设备优先的
WEB 项目。本文将介绍Bootstrap概述

 

引入

  在理念前端开垦进度中,日常出现重复、复杂、无意义地命名,结构冗余、胡乱嵌套,页面错乱等主题素材

  201一年,twitter的“一小撮”工程师为了加强他们中间的辨析和管制技巧,用业余时间为她们的制品营造了壹套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap由MAWranglerK
OTTO和JacobThornton所设计和确立,在github上开源之后,神速造成该站上最四人watch&fork的门类。大批量工程师踊跃为该品种进献代码,社区惊人地龙腾虎跃,代码版本进化非凡迅猛,官方文书档案品质最佳高(能够说是优雅),同时涌现了多数基于Bootstrap建设的网址:分界面清新、简洁,要素排版利落大方

  Bootstrap最新版本是Bootstrap4,牢固版本是Bootstrap3,包容低版本IE的本子是Bootstrap二 

  Bootstrap基于HTML伍和CSS3,其大气的JavaScript插件都凭借
jQuery,且jQuery的版本无法低于一.九.一本子

 

特性

  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
的Logo字体,在有意无意的 Bootstrap 大旨中使用到了这一个Logo

【Bootstrap 源码】

  Bootstrap 源码包括了先期编译的 CSS、JavaScript
和Logo字体文件,并且还有 LESS、JavaScript
和文书档案的源码。具体来说,首要文件协会结构如下:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/js/ 和 fonts/ 目录分别包蕴了 CSS、JS
和字体Logo的源码。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" rel="stylesheet">

    <!-- 在IE8-浏览器中,支持HTML5新标签和媒体查询@media-->
    <!--[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>你好,世界!</h1>

    <!-- 先引入jQurey,再引入bootstrap插件 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

相关文章

网站地图xml地图