文件结构、内容


下载文件后你会意识如下所示的文本结构,分为编写翻译版和源码版。

编写翻译版:平常状态下,编写页面常用到的体裁集(不含响应式)以及插件集。

源码版:bootstrap官方网站下整站的源码。包括众多模板页和less文件,并动用node.js搭建。

前边的话

  Bootstrap是回顾、灵活的用来搭建WEB页面包车型地铁HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具有独具特殊的优越条件的设计、友好的读书曲线、杰出的包容性,还也许有12列响应式栅格结构,丰硕的零部件等等。依照官方网址的宣扬的话,Bootstrap
是最受接待的 HTML、CSS 和 JS 框架,用于支付响应式布局、移动道具优先的
WEB 项目。本文将介绍Bootstrap概述

 

前面的话

  Bootstrap是大概、灵活的用来搭建WEB页面包车型地铁HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具备优异的陈设、友好的就学曲线、特出的包容性,还应该有12列响应式栅格结构,丰硕的零部件等等。遵照官方网址的鼓吹的话,Bootstrap
是最受迎接的 HTML、CSS 和 JS 框架,用于开辟响应式布局、移动设备优先的
WEB 项目。本文将介绍Bootstrap概述

 

1.1编译版

  bootstrap/    ├── css/    │   ├── bootstrap.css─────────全部样式集合(不含响应样式)(123KB)    │   └── bootstrap.min.css────────────(压缩版)(104KB)    ├── js/    │   ├── bootstrap.js────────────全部13款插件集合 (61KB)    │   └── bootstrap.min.js────────────(压缩版)(28KB)    └── img/         ├── glyphicons-halflings.png──────────常用到的sprite图标(深色版)         └── glyphicons-halflings-white.png────────────(浅色版)                      

引入

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

  二零一二年,twitter的“一小撮”程序员为了加强他们中间的辨析和管理技巧,用业余时间为他们的制品创设了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap由MAXC90K
OTTO和JacobThornton所设计和确立,在github上开源之后,火速产生该站上最几个人watch&fork的连串。大批量程序员踊跃为该品种贡献代码,社区惊人地活跃,代码版本进化极其迅猛,官方文书档案品质最棒高(能够说是优雅),同期涌现了点不清依照Bootstrap建设的网址:分界面清新、简洁,要素排版利落大方

  Bootstrap最新版本是Bootstrap4,稳定版本是Bootstrap3,兼容低版本IE的本子是Bootstrap2 

  Bootstrap基于HTML5和CSS3,其大气的JavaScript插件都依靠jQuery,且jQuery的本子不能够低于1.9.1本子

 

引入

  在古板前端开荒进程中,平时出现重复、复杂、无意义地命名,结构冗余、胡乱嵌套,页面错乱等主题素材

  二零一二年,twitter的“一小撮”程序猿为了巩固他们在那之中的辨析和管理能力,用业余时间为他们的制品创设了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap由MAPAJEROK
OTTO和JacobThornton所安顿和确立,在github上开源之后,快捷成为该站上最两个人watch&fork的品类。多量程序猿踊跃为该项目进献代码,社区惊人地活跃,代码版本进化特别便捷,官方文书档案品质最佳高(可以说是优雅),同一时间涌现了过多依据Bootstrap建设的网址:分界面清新、简洁,要素排版利落大方

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

  Bootstrap基于HTML5和CSS3,其大气的JavaScript插件都依附jQuery,且jQuery的本子不能够低于1.9.1版本

 

1.2源码版

  twitter-bootstrap-37d0a30/    ├── docs/    │   ├── assets/【项目包】    │   │   ├── css/    │   │   ├── ico/────────────苹果设备下的图标集合以及站点的favicon.ico    │   │   ├── img/    │   │   ├── js/    │   ├── build/ Twitter下利用node.js和mustache建立的test项目,测试浏览器下一些功能否支持    │   ├── examples/【demo包】    │   │   └── n.html──────────提供9款练习和模仿的demo页    │   ├── templates/【模板包】    │   │   ├── page/    │   │   │    └── n.mustache────首页7部分的JS模板    │   │   └── layout.mustache───首页7部分布局的JS模板    │   ├── base-css.html ──────首页_基础css页    │   ├── components.html──── 首页_组件页                                │   ├── customize.html ───── 首页_定制页     │   ├── extend.html ─────── 首页_less介绍页     │   ├── getting-started.html───首页起步介绍页    │   ├── index.html ──────── 首页    │   ├── javascript.html ───── 首页_插件页    │   └── scaffolding.html───── 首页_手脚架页    ├── img/【sprite包】    │   ├── glyphicons-halflings.png──────────常用到的sprite图标(深色版)    │   └── glyphicons-halflings-white.png────────────(浅色版)    ├── js/ 【插件包】    │   ├── bootstrap-affix.js────────────附加导航    │   ├── bootstrap-alert.js─────────── 警告消息    │   ├── bootstrap-button.js──────────按钮    │   ├── bootstrap-carousel.js─────────轮播    │   ├── bootstrap-collapse.js─────────折叠效果    │   ├── bootstrap-dropdown.js────────下拉菜单    │   ├── bootstrap-modal.js──────────模态对话框       │   ├── bootstrap-popover.js─────────提示     │   ├── bootstrap-scrollspy.js─────────滚动监听     │   ├── bootstrap-tab.js──────────── 标签页    │   ├── bootstrap-tooltip.js───────────工具提示    │   ├── bootstrap-transition.js──────── 过渡效果    │   └── bootstrap-typeahead.js────────输入提示    ├── less/【未编译的css包】    │   └── n.less ──────所有样式的未编译版    ├── .gitignore           ────                       ├── .travis.yml              │    ├── CHANGELOG.md             │    ├── component.json           │                  ├── composer.json            │                   ├── CONTRIBUTING.md          ├── node.js以及JS模板所需的一些配置文件                  ├── LICENSE.md               │                  ├── Makefile                 │                   ├── package.json             │    └── README.md            ────                             

特性

  Bootstrap首要持有以下特点:

  响应式设计

  栅格布局

  完整的类库

  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
安装包的概念文件、许可证文件和编写翻译脚本等。

 

涵盖文件

  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>

 

宗旨模板

<!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>

 

相关文章