为什么网站后台编辑不了,搜什么关键词你都懂的,做360手机网站,玉林建设银行网站前面的话 Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3#xff0c;具有漂亮的设计、友好的学习曲线、卓越的兼容性#xff0c;还有12列响应式栅格结构#xff0c;丰富的组件等等。按照官网的宣传来说#xff0c;Boot…前面的话 Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3具有漂亮的设计、友好的学习曲线、卓越的兼容性还有12列响应式栅格结构丰富的组件等等。按照官网的宣传来说Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架用于开发响应式布局、移动设备优先的 WEB 项目。本文将介绍Bootstrap概述 引入 在传统前端开发过程中常常出现重复、复杂、无意义地命名结构冗余、胡乱嵌套页面错乱等问题 2011年twitter的“一小撮”工程师为了提高他们内部的分析和管理能力用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立在github上开源之后迅速成为该站上最多人watchfork的项目。大量工程师踊跃为该项目贡献代码社区惊人地活跃代码版本进化非常快速官方文档质量极其高(可以说是优雅)同时涌现了许多基于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 langzh-CN
head
!-- utf-8编码--
meta charsetutf-8
!-- 在IE运行最新的渲染模式--
meta http-equivX-UA-Compatible contentIEedge
!--视口viewport设置--
meta nameviewport contentwidthdevice-width, initial-scale1
!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --
titleBootstrap 101 Template/title
!-- 引入Bootstrap --
link hrefcss/bootstrap.min.css relstylesheet
!-- 在IE8-浏览器中支持HTML5新标签和媒体查询media--
!--[if lt IE 9]
script srchttps://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js/script
script srchttps://cdn.bootcss.com/respond.js/1.4.2/respond.min.js/script
![endif]--
/head
body
h1你好世界/h1
!-- 先引入jQurey再引入bootstrap插件 --
script srchttps://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
script srcjs/bootstrap.min.js/script
/body
/html
