Bootstrap 教程
Bootstrap 环境安装
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
您会看到两个按钮：
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 ，这是 Twitter 的基于
的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
本教程编写时，使用的是最新版（Bootstrap 3）。
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：
&!DOCTYPE html&
&title&Bootstrap 模板&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- 引入 Bootstrap --&
&link href="/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"&
&!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --&
&!-- 注意： 如果通过 file://
引入 Respond.js 文件，则该文件无法起效果 --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&h1&Hello, world!&/h1&
&!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --&
&script src="/jquery.js"&&/script&
&!-- 包括所有已编译的插件 --&
&script src="js/bootstrap.min.js"&&/script&
在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。
有关上面代码段中每个元素的细节将在
章节详细讲解。
现在让我们尝试使用Bootstrap输出"Hello, world!"：
&!DOCTYPE html&
&title&在线尝试 Bootstrap 实例&/title&
&link href="/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"&
&script src="/libs/jquery/2.0.0/jquery.min.js"&&/script&
&script src="/libs/bootstrap/3.3.0/js/bootstrap.min.js"&&/script&
&h1&Hello, world!&/h1&
Bootstrap CDN推荐
本站实例采用的是百度的静态资源库()上的Bootstrap资源。
百度的静态资源库的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下：
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link href="/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"&
&!-- 可选的Bootstrap主题文件（一般不使用） --&
&script src="/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"&&/script&
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src="/libs/jquery/2.0.0/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="/libs/bootstrap/3.3.0/js/bootstrap.min.js"&&/script&Bootstrap3中文文档chm
Bootstrap3中文文档chm
Bootstrap3中文文档,chm格式的文档 本资料共包含以下附件： Bootstrap3中文文档(v3.0.CHM
（本资料免费下载）
本资料由网友发布，仅代表网友个人经验或观点，不代表本网站立场和观点。如果本资料侵犯了您的知识产权，请与我们取得联系，我们会及时处理。
&&&主编推荐
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&BootStrap初学者入门教程pdf格式免费版_东坡下载
东坡下载：内容最丰富最安全的下载站！|||
您的位置： →
→ BootStrap初学者入门教程 pdf格式免费版下载
BootStrap初学者入门教程介绍
本节内容小编为大家精选带来的是pdf格式免费版BootStrap初学者入门教程，如果你是一个BootStrap初学者，正好需要一份这样的bootstrap教程，那就赶紧点击本文下方的“立即下载”进行查阅吧！温馨提示：本文档为PDF格式文档，因此需确保在阅读之前你已经安装了，如果尚未安装阅读器，建议下载福昕或其他PDF阅读器进行安装后阅读。BootStrap初学者入门教程内容节选……GitHub 上这样介绍 &bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于 html5、css3的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于 Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用 LESS与自定义.本文主要介绍Bootstrap 的基础布局--Scaffolding.Bootstrap 建立了一个响应式的12列格网布局系统，它引入了 fixed 和 fluid-with 两种布局方式。我们从全局样式(Global &Style),格网系统(Grid &System),流式格网(Fluid &grid &System),自定义(Customing),布局(Layouts),响应式设计(Responsive & &Design)这六五个方面深入讲解Boostrap 的 scaffolding.1 & 全局样式(Global &Style).Bootstrap 要求 html5的文件类型，所以必须在每个使用 bootstrap 页面的开头都引用:&!DOCTYPE html&&htmllang=&en&& &...…… & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&图1-3 & & & & &嵌套列(Nesting &columns) & 以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div. &divclass=&row&&&&divclass=&span12&& & &Level 1 of column&&divclass=&row&&&&divclass=&span6&&Level 2&/div&&&divclass=&span6&&Level 2&/div&&&/div&&&/div&&&/div&&嵌套的 div长度之和不能大于它的父 div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。&4 &流式格网系统(Fluid &grid &system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row &改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：……1.2 & &强调(Emphasis).使用&strong&和&em&两个标签，前者使用粗体，后者使用斜体来强调标签内容。请注意&strong&标签在html4中定义语气更重的强调文本；在 &HTML 5 &中，&strong& 定义重要的文本。这些短语标签也可以通过定义 CSS 的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations &).使用&abbr&，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入 title 属性来显示原文，使用.initialism 类对缩写以大写方式显示。&1.3 & 引用文字(Blockquotes).使用&blockquote&标签和&small&两个标签，前者&blockquote&是引用的文字内容，后者&small&是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示&……BootStrap初学者入门教程相关内容小编就为大家介绍到这里了，更多pdf格式文档资料下载，敬请关注站！
BootStrap初学者入门教程 pdf格式免费版
其它相关版本
17.1M / 06-03 / 2.0.1 官方PC版【免费下载】
7KB / 12-18 / word打印版
95KB / 07-11 / V2.0 绿色版
2.7M / 03-19 / pdf 格式
13.7M / 04-01 / dwg格式
本类软件排行
装机必备软件
素材字体高考学习<meta name="author" content="译者：王赛 ">
Bootstrap 中文文档
为所有开发者、所有应用场景而设计。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
预处理脚本
虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 -
开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。
一个框架、多种设备
你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。
Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。
基于 Bootstrap 构建的网站
全球数以百万计的网站都是基于 Bootstrap 构建的。你可以先参观一下我们提供的或者看一看我们粉丝的网站吧。
我们在“优站精选”里展示了许多精美的 Bootstrap 网站。