前端技术（Bootstrap）完整版.pdf

前端技术 （Bootstrap） ⽬录 1、、什什么么是是 Bootstrap? Bootstrap 是⼀个⽤于快速开发 Web ⽤程序和⽹站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 20 11 年⼋⽉在 GitHub 上发布的开源产品。 2、、为为什什么么使使⽤⽤ Bootstrap? 移动设备优先 ：⾃ Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器⽀持 ：所有的主流浏览器都⽀持 Bootstrap。 容易上⼿ ：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。 响 式设计 ：Bootstrap 的响 式 CSS 能够 ⾃适 于台式机、平板电脑和⼿机。它为开发⼈员创建接⼝提供了⼀个简洁统⼀的解决⽅ 案。 它包含了功能强⼤的内置组件，易于定制。 它还提供了基于 Web 的定制。 它是开源的。 3、、Bootstrap包包的的内内容容 基本结构 ：Bootstrap 提供了⼀个带有⽹格系统、链接样式、背景的基本结构。 CSS ：Bootstrap ⾃带以下特性 ：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及⼀个先进的⽹格系统。 组件 ：Bootstrap 包含了⼗⼏个可重⽤的组件，⽤于创建图像、下拉菜单、导航、警告框、弹出框等等。 JavaScript 插件 ：Bootstrap 包含了⼗⼏个⾃定义的 j Query 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。 定制 ：您可以定制 Bootstrap 的组件、LESS 变量和 j Query 插件来得到您 ⾃⼰的版本。 4、、Bootstrap的的下下载载和和安安装装 您会看到两个按钮 ： Download Bootstrap ：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包 含⽂档和最初的源代码⽂件。 Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到必威体育精装版的 Bootstrap LESS 和 JavaScript 源代码。 如果您使⽤的是未编译的源代码，您需要编译 LESS ⽂件来⽣成可重⽤的 CSS ⽂件。对于编译 LESS ⽂件，Bootstrap 官⽅只⽀持 ，这 是 Twitter 的基于 的 CSS 提⽰。 我使⽤的是 Bootstrap 的预编译版本 （Bootstrap 3）。 由于⽂件是被编译过和压缩过的，在独⽴的功能开发中，不必每次都包含这些独⽴的⽂件。 4.1 ⽂⽂件件结结构构 4.1.1 预预编编译译 的的 Bootstrap 当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP ⽂件，您将看到下⾯的⽂件/ ⽬录结构 ： 如上图所⽰，可以看到已编译的 CSS 和 JS （bootstrap.*），以及已编译压缩的 CSS 和 JS （bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是⼀个可选的 Bootstrap 主题。 4.1.2 Bootstrap 源源代代码码 如果您下载了 Bootstrap 源代码，那么⽂件结构将如下所⽰ ： less/ 、j s/ 和 fonts/ 下的⽂件分别是 Bootstrap CSS、JS 和图标字体的源代码。 dist/ ⽂件夹包含了上⾯预编译下载部分中所列的⽂件和⽂件夹。 docs-assets/ 、examples/ 和所有的 *.html ⽂件是 Bootstrap ⽂档。 在⼯程中我们导⼊这些⽂件 ： !DOCTYPE html html head meta charset=utf-8 / t tlebootstrap⼊门与使⽤/t tle !--boostrap的使⽤ ： 1、必须先引⼊bootstrap的⽀持 ，包括js、css、font⽂件 2、引⼊的⽂件必须先有jQuery的核⼼⽂件，再引⼊bootstrap的js⽂件，再引⼊ ⾃⼰的⽂件 3、css⽂件必须先引⼊bootstra