下载文档原格式
Bootstrap基本模板Bootstrap简介Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。
它的座右铭就是：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
为什么要使⽤Bootstrap?1. ⽣态圈⽕，不断地更新迭代；2. 提供⼀套美观⼤⽅地界⾯组件；3. 提供⼀套优雅的 HTML+CSS 编码规范；4. 让我们的 Web 开发更简单，更快捷；【注意】使⽤ Bootstrap 并不代表不⽤写 CSS 样式，⽽是不⽤写绝⼤多数⼤家都会⽤到的样式。
Bootstrap基本模板介绍<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><!-- 设置浏览器的兼容模式版本(让IE使⽤最新的渲染引擎⼯作) --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 声明在移动端端所⽤到的属性 --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必须*跟随其后！ --><title>微⾦所</title><link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 ⽀持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页⾯拖拽到浏览器中）访问页⾯时 Respond.js 不起作⽤ --><!-- 条件注释的作⽤：判断条件满⾜时，就会执⾏注释中的HTML代码条件不满⾜时，就会当做注释--><!--html5hiv: 让浏览器可以识别HTML5的新标签respond: 让低版本浏览器可以使⽤css3的媒体查询--><!-- [if lt IE 9]><script src="lib/html5shiv/html5shiv.js"></script><script src="lib/respond/respond.src.js"></script><![endif] --><!-- ⾃⼰写的CSS⽂件 --><link rel="stylesheet" type="text/css" href="css/main.css"></head><body><!-- 必须引⼊，位置必须这样 --><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><!-- ⾃⼰写的js⽂件 --><script src="js/main.js" type="text/javascript"></script></body></html>模板中移动端所⽤到的属性介绍1. width:视⼝的宽度 width=device-width => 视⼝的宽度随着设备的宽度进⾏响应式变化。
bootstrap 步骤
Bootstrap的使用步骤如下：
1.创建文件夹：按照以往的习惯创建文件夹。
2.下载Bootstrap：在官网下载压缩包，选择下载生产环境的压缩包，将
其解压到项目目录下，但是不能覆盖你自己建的文件夹。
3.创建html骨架结构：先正常搭建一个html页面，然后再选中“基础模
板”中的所需代码，复制到你自己搭建的html页面中。
4.引入相关样式文件：使用link标签引入css文件，这里以min.css为
例。
5.书写内容：正常输入内容，如果发现内容没有了浏览器默认的内外边
距，则证明css文件引入成功。
6.使用：这里使用按钮为例。
在全局css中选中按钮，根据预定义样式选
中你所需要的css按钮样式，然后复制对应的代码到你搭建好的
Bootstrap结构中并允许查看成功与否。
请注意，以上步骤是使用Bootstrap的基本步骤，但具体实现会根据具体的应用场景和需求有所变化。
下载好的bootstrap版本含有css、js、img文件结构：bootstrap/├──css/│├──bootstrap.css│├──bootstrap.min.css├──js/│├──bootstrap.js│├──bootstrap.min.js└──img/├──glyphicons-halflings.png└──glyphicons-halflings-white.png文档章节：Bootstrap中的HTML、CSS和JS适用于各类设备：脚手架：全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构基本css样式：常见的HTML元素-- 如排版、代码、表格、表单、和按钮的样式。
还包括Glyphicons, 一个非常棒的图标集。
Glyphicons：组件：常见界面组件-- 如标签、pill、导航、警告、页面标题的基本样式。
js插件：和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
组件列表：组件库和JavaScript插件集一同提供了以下组件元素。
•按钮组•按钮下拉菜单•用于导航的标签、pill、列表•导航条•Labels•Badges•Page headers and hero unit•缩略图•警告对话框•进度条•模态对话框(Modals)•下拉菜单(Dropdowns)•Tooltips•Popovers•Accordion•Carousel•Typeahead在后面的文档中, 我们会挨个详细的介绍这些组件的细节。
在此之前, 先来看看如何使用并定制它们。
（js文件引用使用script src、css文件引用使用link href）为了使典型的html文件成为一个boolstrap没干开发任何网站和应用程序就必须设置加入下载的boolstrap的两个文件--js、css=============================================================================== =============================================================================== 脚手架：全局设置：必须使用HTML5文档类型<!doctype html><html lang ="en"><html>栅格系统：对于简单的两列式布局，创建一个.row 容器，并在容器中加入合适数量的.span* 列即可。
Bootstrap的使用手册及学习笔记Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。
关于Bootstrap的介绍和下载，大家可以去搜索查看。
Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。
因此这一文档类型必须出现在项目的每个页面的开始部分：<!DOCTYPE html>2 <html lang="en">3 ...4 </html>HTML中定义的所有标题标签, 从<h1> 到 <h6> 都是可用的。
Bootstrap定义的全局font-size 是 14px，line-height 是 20px。
这些样式应用到了 <body> 和所有的段落上。
另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。
在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。
如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。
因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。
另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。
当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。
bootstrap常用样式Bootstrap是一种前端开发框架，提供了丰富的样式和组件，用于快速构建响应式网页。
在本文中，我将介绍一些常用的Bootstrap 样式，包括标题的样式。
一、标题样式1. h1-h6标题样式Bootstrap提供了h1-h6标签的样式，可以根据标题的重要程度选择合适的标签。
h1标签通常用于页面的主要标题，h2-h6标签则用于副标题或其他次要标题。
2. 文字颜色样式Bootstrap提供了多种文字颜色样式，可以根据需要选择合适的颜色。
比如，可以使用.text-primary样式设置文字为主要颜色，.text-danger样式设置文字为红色，.text-success样式设置文字为绿色等。
3. 文字背景样式Bootstrap提供了多种文字背景样式，可以为标题添加背景色。
比如，可以使用.bg-primary样式为标题添加主要背景色，.bg-danger样式为标题添加红色背景色，.bg-success样式为标题添加绿色背景色等。
4. 文字对齐样式Bootstrap提供了多种文字对齐样式，可以根据需要设置标题的对齐方式。
比如，可以使用.text-left样式将标题左对齐，.text-center样式将标题居中，.text-right样式将标题右对齐等。
5. 文字大小样式Bootstrap提供了多种文字大小样式，可以根据需要设置标题的大小。
比如，可以使用.display-1样式设置标题为最大的字号，.display-2样式设置标题为较大的字号，.display-3样式设置标题为中等字号等。
6. 文字样式Bootstrap提供了多种文字样式，可以根据需要设置标题的样式。
比如，可以使用.font-weight-bold样式设置标题为粗体，.font-italic样式设置标题为斜体，.text-uppercase样式将标题转换为大写等。
7. 文字装饰样式Bootstrap提供了多种文字装饰样式，可以为标题添加装饰效果。
全⾯解析Bootstrap排版使⽤⽅法（⽂字样式）⼀、段落 段落是排版中另⼀个重要元素之⼀。
在Bootstrap中为⽂本设置了⼀个全局的⽂本样式（这⾥所说的⽂本是指正⽂⽂本）：1、全局⽂本字号为14px(font-size)。
2、⾏⾼为1.42857143（line-height），⼤约是20px(⼤家看到⼀串的⼩数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜⾊为深灰⾊（#333）；⼆、⽂字样式 在实际项⽬中，对于⼀些重要的⽂本，希望突出强调的部分都会做另外的样式处理。
Bootstrap同样对这部分做了⼀些轻量级的处理。
如果想让⼀个段落p突出显⽰，可以通过添加类名“.lead”实现，其作⽤就是增⼤⽂本字号，加粗⽂本，⽽且对⾏⾼和margin也做相应的处理。
1.粗体：在Bootstrap中，可以使⽤<b>和<strong>标签让⽂本直接加粗。
2.斜体：在Bootstrap中，可以使⽤<em>或<i>来实现⽂本斜体。
三、强调类.text-muted：提⽰，使⽤浅灰⾊（#999）.text-primary：主要，使⽤蓝⾊（#428bca）.text-success：成功，使⽤浅绿⾊(#3c763d).text-info：通知信息，使⽤浅蓝⾊（#31708f）.text-warning：警告，使⽤黄⾊（#8a6d3b）.text-danger：危险，使⽤褐⾊（#a94442）<div class="text-muted">.text-muted 效果</div><div class="text-primary">.text-primary效果</div><div class="text-success">.text-success效果</div><div class="text-info">.text-info效果</div><div class="text-warning">.text-warning效果</div><div class="text-danger">.text-danger效果</div>效果如下：四、⽂本对齐 在排版中离不开⽂本的对齐⽅式。
主题：Bootstrap Select2 CSS 使用指南一、什么是Bootstrap Select2 CSS？Bootstrap Select2 CSS是一个基于Bootstrap框架的扩展插件，用于美化和增强原生的HTML表单下拉选择框。
它结合了Bootstrap框架的外观和功能特性，同时添加了更多的定制化和交互性，使得表单下拉选择框更加灵活和易用。
二、为什么选择Bootstrap Select2 CSS？1.外观美观：Bootstrap Select2 CSS可以帮助用户快速定制下拉选择框的外观样式，使其更加美观和符合全球信息湾的整体设计风格。
2.功能强大：除了基本的下拉选择功能外，Bootstrap Select2 CSS还支持搜索、多选、远程数据加载等高级功能，满足各种复杂的表单需求。
3.易于使用：通过简单的HTML标记和JavaScript配置，就可以快速集成Bootstrap Select2 CSS到现有的项目中，无需大量的代码编写和样式调整。
三、如何使用Bootstrap Select2 CSS？1.引入必要的文件：首先需要在HTML文件中引入Bootstrap框架的CSS和JavaScript文件，以及Select2插件的CSS和JavaScript文件。
可以直接下载源文件，也可以通过CDN信息引入。
2.初始化下拉选择框：在页面加载完成后，通过JavaScript代码对需要使用Bootstrap Select2 CSS的下拉选择框进行初始化和配置，包括设置外观样式、绑定事件、加载远程数据等。
3.定制样式和功能：根据项目需求，可以通过CSS样式和JavaScript配置对下拉选择框进行定制，包括修改外观样式、添加搜索功能、启用多选等。
4.高级功能扩展：Bootstrap Select2 CSS支持各种高级功能扩展，比如远程数据加载、动态选项加载、自定义模板等，可以根据实际需求选择合适的功能进行集成。
HTML5是一种用于构建和呈现Web内容的标准。
Bootstrap是一种流行的HTML、CSS和JavaScript框架，用于开发响应式和移动优先的网页设计。
二、中文HTML5 Bootstrap模板的优势1. 响应式设计：中文HTML5 Bootstrap模板通过Bootstrap框架实现了响应式设计，确保全球信息湾能够在各种设备上都有良好的展示效果。
2. 多样化的组件：Bootstrap提供了丰富的UI组件和Javascript 插件，能够帮助开发者快速构建各种网页元素，包括导航、表单、按钮等。
3. 简洁易用的文档：Bootstrap的文档清晰易懂，提供了大量的实例和样式。
开发者能够轻松地查找想要的组件和样式，并将其应用到自己的项目中。
三、中文HTML5 Bootstrap模板的基本结构1. HTML5文档声明：中文HTML5 Bootstrap模板以<!DOCTYPE html>声明开头，标识该页面采用HTML5标准。
2. 元数据设置：通过<meta>标签设置网页的字符编码、视口设置3. 使用Bootstrap样式：引入Bootstrap的CSS文件，通过class 来应用Bootstrap的样式。
4. 使用Bootstrap组件：通过引入Bootstrap的Javascript文件或CDN信息，来使用其丰富的UI组件和插件。
四、中文HTML5 Bootstrap模板的实际应用1. 个人全球信息湾：通过中文HTML5 Bootstrap模板，开发者能够快速搭建个人全球信息湾，展示个人作品和简历。
2. 企业全球信息湾：许多企业选择中文HTML5 Bootstrap模板来建设企业全球信息湾，因为其快速、简洁的特性能够满足企业对于全球信息湾建设的需求。
3. 电子商务全球信息湾：中文HTML5 Bootstrap模板能够快速构建电子商务全球信息湾，通过Bootstrap的响应式设计，确保在不同终端都有良好的展示效果，提升用户体验。
bootcss教程Bootstrap 是一个开源的前端框架，由 Twitter 开发和维护。
它是一个面向设计师、开发者和初学者的非常流行的框架，因为它可以让他们快速搭建响应式网页和应用程序。
Bootstrap 提供了一系列的 CSS 和 JavaScript 组件，可以在任何设备上以一致的方式呈现页面。
首先，Bootstrap 提供了大量的 CSS 类和样式，可以用于快速创建各种元素。
它使用了一种栅格系统，可以将页面分为 12个列，可以通过添加相应的类来指定元素在不同屏幕尺寸上的显示方式。
此外，Bootstrap 还提供了各种内置的样式类，用于创建按钮、表单、导航栏等常见元素。
使用这些类和样式，开发者可以快速创建出漂亮且一致的页面。
另外，Bootstrap 还提供了一些非常实用的组件，例如轮播图、导航栏、模态框等。
这些组件可以通过简单地添加对应的HTML 和 JavaScript 代码来使用。
这些组件不仅具有美观的外观，还拥有丰富的交互特性，例如轮播图可以自动切换图片，导航栏可以收缩和展开等。
这些组件大大简化了开发者的工作，节省了他们的时间和精力。
此外，在 Bootstrap 中还包含了一些 JavaScript 插件，用于增强网页的功能和效果。
这些插件可以轻松地集成到项目中，并提供了各种实用的功能，例如弹出框、滚动监听等。
通过使用这些插件，开发者可以为网页添加更多的交互特性，提升用户体验。
最重要的一点是，Bootstrap 是响应式的。
这意味着通过Bootstrap 开发的网页可以根据不同的设备和屏幕尺寸进行自动适应和优化。
不论是在桌面端、平板还是手机上，页面都能保持良好的显示效果。
这对于现代化的多设备时代来说非常重要，可以为用户提供一致的体验。
总的来说，Bootstrap 是一个非常实用的前端框架，它提供了丰富的 CSS、JavaScript 组件和插件，能够帮助开发者快速搭建出漂亮、响应式的页面和应用程序。
bootstrap学习⼼得总结-css样式设计分享由于项⽬需要，所以打算好好学习下bootstrap框架，之前了解⼀点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。
⼀：bootstrap是什么？bs是什么? 即前端页⾯搭建的标准化框架⼯具，已经写好了css.js样式，只需要拿来⽤即可。
怎么⽤bs呢？主要是通过使⽤不同的类增加效果，每⼀种类，对应的功能不同。
bs好处：增加了开发效率，页⾯设计更加美观,⽀持响应式开发。
⼆：css样式设计1：基于Html⽂档bootstrap引⽤了部分html元素，所以头部需写成下⾯所⽰的样列。
JavaScript Code复制内容到剪贴板1. <!DOCTYPE html> ---包含HTML5⽂档声明，所有浏览器均开启标准模式2. <html>3. <head>4. <meta charset="utf-8">5. <meta http-equiv="X-UA-Compatible" content="IE=edge">6. <meta name="viewport" content="width=device-width, initial-scale=1">7. <!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必须*跟随其后！确保⽀持响应式布局 -->8. <title>Bootstrap</title>9. <!-- 新 Bootstrap 核⼼ CSS ⽂件 -->10. <link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css">11.12. <!-- 可选的Bootstrap主题⽂件（⼀般不⽤引⼊） -->13. <link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap-theme.min.css">14.15. <!-- jQuery⽂件。
Bootstrap Aboutthe T utorialTw i tter Bootstrap i s the most popu l ar front end framework i n the recent t i me. It i s s l eek,i ntu i t i ve, and powerfu l mob il e f i rst front-end framework for faster and eas i er web deve l opment. It uses HTML, CSS and Javascr i pt.Th i s tutor i a l w ill teach you the bas i cs of Bootstrap Framework us i ng wh i ch you can create web projects w i th ease. The tutor i a l i s d i v i ded i nto sect i ons such as BootstrapBas i c Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap P l ug i ns. Each of these sect i ons conta i n re l ated top i cs w i th s i mp l e and usefu l examp l es.AudienceTh i s tutor i a l has been prepared for anyone who has a bas i c know l edge of HTML and CSSand has an urge to deve l op webs i tes. After comp l et i ng th i s tutor i a l you w ill f i nd yourse l fat a moderate l eve l of expert i se i n deve l op i ng web projects us i ng Tw i tter Bootstrap. PrerequisitesBefore you start proceed i ng w i th th i s tutor i a l, we are assum i ng that you are a l ready aware about the bas i cs of HTML and CSS. If you are not we ll aware of these concepts,then we w ill suggest you to go through our short tutor i a l on HTML Tutor i a l and CSS Tutor i a l.Copyright&DisclaimerCopyr i ght 2014 by Tutor i a l s Po i nt (I) Pvt. Ltd.A ll the content and graph i cs pub li shed i n th i s e-book are the property of Tutor i a l s Po i nt(I) Pvt. Ltd. The user of th i s e-book i s proh i b i ted to reuse, reta i n, copy, d i str i bute or repub li sh any contents or a part of contents of th i s e-book i n any manner w i thout wr i tten consent of the pub li sher.We str i ve to update the contents of our webs i te and tutor i a l s as t i me l y and as prec i se l yas poss i b l e, however, the contents may conta i n i naccurac i es or errors. Tutor i a l s Po i nt (I) Pvt. Ltd. prov i des no guarantee regard i ng the accuracy, t i me li ness or comp l eteness ofour webs i te or i ts contents i nc l ud i ng th i s tutor i a l. If you d i scover any errors on our webs i te or i n th i s tutor i a l, p l ease not i fy us at **************************iT able ofContentsAbout the Tuto r ial (i)Audien c e (i)P r e r equisites (i)Copy r ight&Dis c laime r (i)Table o f Contents (ii)1. BOOTSTRAP ─ OVERVIEW (1)2. BOOTSTRAP ─ ENVIRONMENT SETUP (3)Download Bootst r ap (3)File st r u c tu r e (3)HTML Template (4)3. BOOTSTRAP ─ GRID SYSTEM (6)What is a G r id? (6)What is Bootst r ap G r id System? (6)Wo r king o f Bootst r ap G r id System (6)Media Que r ies (7)G r id Options (8)Responsive Column Resets (14)O ff set Columns (15)Nesting Columns (16)Column O r de r ing (17)4. BOOTSTRAP ─ CSS OVERVIEW (19)HTML5do c type (19)Mobile Fi r st (19)Responsive Images (20)Typog r aphy and Links (20)No r mali z e (20)Containe r s (20)5. BOOTSTRAP ─ TYPOGRAPHY (22)Headings (22)Lead Body Copy (23)Emphasis (23)Abb r eviations (24)Add r esses (24)Blo c kquotes (25)Lists (26)6. BOOTSTRAP ─ CODE (29)7. BOOTSTRAP ─ TABLES (30)Basi c Table (30)Optional Table Classes (31)Conte x tual c lasses (35)Responsive tables (37)8. BOOTSTRAP ─ FORMS (39)Fo r m Layout (39)Suppo r ted Fo r m Cont r ols (42)Stati c Cont r ol (45)Fo r m Cont r ol States (46)Fo r m Cont r ol Si z ing (49)Help Te x t (50)iii9. BOOTSTRAP ─ BUTTONS (51)Button Si z e (52)Button State (54)Button Tags (57)10. BOOTSTRAP ─ IMAGES (58)11. BOOTSTRAP ─ HELPER CLASSES (59)Close i c on (59)Ca r ets (59)Qui c k Floats (59)Cente r Content Blo c ks (60)Clea rf i x (60)Showing and Hiding Content (61)S cr een Reade r Content (61)12. BOOTSTRAP ─ RESPONSIVE UTILITIES (62)P r int Classes (62)13. BOOTSTRAP ─ GLYPHICONS (64)What a r e Glyphi c ons? (64)Whe r e to f ind Glyphi c ons? (64)Usage (64)14. BOOTSTRAP ─ DROPDOWNS (66)Options (67)15. BOOTSTRAP ─ BUTTON GROUPS (70)Basi c Button G r oup (71)Button Toolba r (71)Button Si z e (72)Nesting (72)Ve r ti c al Buttong r oup (73)16. BOOTSTRAP ─ BUTTON DROPDOWNS (75)Split Button D r opdowns (76)Button D r opdown Si z e (77)D r opup Va r iation (78)17. BOOTSTRAP ─ INPUT GROUPS (80)Basi c Input G r oup (80)Input G r oup Si z ing (81)Che c kbo x es and Radio Addons (82)Button Addons (83)Buttons with D r opdowns (84)Segmented Buttons (85)18. BOOTSTRAP ─ NAVIGATION ELEMENTS (88)Tabula r Navigation o r Tabs (88)Pills Navigation (88)Justi f ied Nav (90)Disabled Links (90)D r opdowns (91)19. BOOTSTRAP ─ NAVBAR (94)De f ault Navba r (94)Responsive Navba r (95)Fo r ms in Navba r (96)Buttons in Navba r (97)Te x t in Navba r (98)Non-nav Links (98)vComponent Alignment (99)Fi x ed to Top (101)Fi x ed to Bottom (102)Stati c Top (103)Inve r ted Navba r (104)20. BOOTSTRAP ─ BREADCRUMB (106)21. BOOTSTRAP ─ PAGINATION (107)Pagination (107)Page r (110)22. BOOTSTRAP ─ LABELS (112)23. BOOTSTRAP ─ BADGES (113)A c tive Nav States (113)24. BOOTSTRAP ─ JUMBOTRON (115)25. BOOTSTRAP ─ PAGE HEADER (117)26. BOOTSTRAP ─ THUMBNAILS (118)Adding Custom Content (119)27. BOOTSTRAP ─ ALERTS (122)Dismissal Ale r ts (122)Links in Ale r ts (124)28. BOOTSTRAP ─ PROGRESS BARS (125)De f ault P r og r ess Ba r (125)Alte r nate P r og r ess Ba r (125)St r iped P r og r ess Ba r (127)Animated P r og r ess Ba r (128)Sta c ked P r og r ess Ba r (128)29. BOOTSTRAP ─ MEDIA OBJECT (130)30. BOOTSTRAP ─ LIST GROUP (135)Adding Badges to List G r oup (135)Linking List G r oup Items (136)Add Custom Content to List G r oup (137)31. BOOTSTRAP ─ PANELS (139)Panel with Heading (139)Panel with Foote r (140)Panel Conte x tual Alte r natives (141)Panel with Tables (142)Panel with Listg r oups (143)32. BOOTSTRAP ─ WELLS (145)Si z ing (145)33. BOOTSTRAP ─ PLUGINS OVERVIEW (146)Data Att r ibutes (146)P r og r ammati c API (146)No Con f li c t (147)Events (147)34. BOOTSTRAP ─ TRANSITION PLUGIN (148)Use Cases (148)35. BOOTSTRAP ─ MODAL PLUGIN (149)Usage (149)Options (151)Methods (152)Events (154)36. BOOTSTRAP ─ DROPDOWN PLUGIN (157)Usage (157)Options (159)Methods (160)37. BOOTSTRAP ─ SCROLLSPY PLUGIN (162)Usage (162)Options (164)Methods (165)Events (168)38. BOOTSTRAP ─ TAB PLUGIN (172)Usage (172)Fade E ff e c t (173)Methods (174)Events (177)39. BOOTSTRAP ─ TOOLTIP PLUGIN (180)Usage (180)Options (182)Methods (183)Events (185)40. BOOTSTRAP ─ POPOVER PLUGIN (187)Usage (187)Options (188)Methods (190)Events (192)41. BOOTSTRAP ─ ALERT PLUGIN (194)Usage (194)Options (195)Methods (195)Events (196)42. BOOTSTRAP ─ BUTTON PLUGIN (198)Loading State (198)Single Toggle (199)Che c kbo x (199)Radio (200)Usage (200)Options (200)Methods (200)43. BOOTSTRAP ─ COLLAPSE PLUGIN (204)Usage (206)Options (207)Methods (207)Events (210)44. BOOTSTRAP ─ CAROUSEL PLUGIN (213)Optional Captions (214)Usage (215)Options (216)Methods (216)Events (219)Bootstrap45. BOOTSTRAP ─ AFFIX PLUGIN (222)Usage (222)Positioning via CSS (228)Options (229)xWhat is Twitter Bootstrap?Bootstrap i s a s l eek, i ntu i t i ve, and powerfu l, mob il e f i rst front-end framework for fasterand eas i er web deve l opment. It uses HTML, CSS, and Javascr i pt.Bootstrap was deve l oped by Mark Otto and Jacob Thornton at Tw i tter. It was re l eased asan open source product i n August 2011 on G i tHub.Why Use Bootstrap?∙Mobile first approach: Bootstrap 3 framework cons i sts of Mob il e f i rst sty l es throughout the ent i re li brary i nstead of them i n separate f il es.∙Browser Support: It i s supported by a ll popu l ar browsers.∙Easy to get started: W i th just the know l edge of HTML and CSS anyone can get started w i th Bootstrap. A l so the Bootstrap off i c i a l s i te has a good documentat i on.∙Responsive design: Bootstrap's respons i ve CSS adjusts to Desktops, Tab l ets and Mob il es. More about the respons i ve des i gn i s i n the chapter BootstrapResponsive Design.∙Prov i des a c l ean and un i form so l ut i on for bu il d i ng an i nterface for deve l opers.∙It conta i ns beaut i fu l and funct i ona l bu il t-i n components wh i ch are easy to custom i ze.∙It a l so prov i des web-based custom i zat i on.∙And best of a ll i t i s an open source.1BootstrapWhat Bootstrap Package Includes?∙Scaffolding: Bootstrap prov i des a bas i c structure w i th Gr i d System, li nk sty l es, and background. Th i s i s covered i n deta il i n the sect i on BootstrapBasic Structure.∙CSS: Bootstrap comes w i th the feature of g l oba l CSS sett i ngs, fundamenta l HTML e l ements sty l ed and enhanced w i th extens i b l e c l asses, and anadvanced gr i d system. Th i s i s covered i n deta il i n the sect i on Bootstrap withCSS.∙Components: Bootstrap conta i ns over a dozen reusab l e components bu il t to prov i de i conography, dropdowns, nav i gat i on, a l erts, pop-overs, and muchmore. Th i s i s covered i n deta il i n the sect i on Layout Components.∙JavaScript Plugins: Bootstrap conta i ns over a dozen custom jQuery p l ug i ns.You can eas il y i nc l ude them a ll, or one by one. Th i s i s covered i n deta il s i n thesect i on Bootstrap Plugins.∙Customize: You can custom i ze Bootstrap's components, LESS var i ab l es, and jQuery p l ug i ns to get your very own vers i on.22.Bootstrap─Environment SetupIt i s very easy to setup and start us i ng Bootstrap. Th i s chapter w ill exp l a i n how to down l oad and setup Bootstrap. We w ill a l so d i scuss the Bootstrap f il e structure, and demonstrate i ts usage w i th an examp l e.DownloadBootstrapYou can down l oad the l atest vers i on of Bootstrap from /. Whenyou c li ck on th i s li nk, you w ill get to see a screen as be l ow:Here you can see two buttons:∙ Down l oad Bootstrap: C li ck i ng th i s, you can down l oad the precomp il edand m i n i f i ed vers i ons of Bootstrap CSS, JavaScr i pt, and fonts. No documentat i on oror i g i na l source code f il es are i nc l uded.∙ Down l oad Source: C li ck i ng th i s, you can get the l atest Bootstrap LESSand JavaScr i pt source code d i rect l y from G i tHub.If you work w i th Bootstrap's uncomp il ed source code, you need to comp il e the LESS f il esto produce usab l e CSS f il es. For comp ili ng LESS f il es i nto CSS, Bootstrap off i c i a ll y supports on l y Recess, wh i ch i s Tw i tter's CSS h i nter based on l ess.js.For better understand i ng and ease of use, we sha ll use precomp il ed vers i on of Bootstrap throughout the tutor i a l. As the f il es are comp li ed and m i n i f i ed, you don't have to bother every t i me i nc l ud i ng separate f il es for i nd i v i dua l funct i ona li ty. At the t i me of wr i t i ng th i stutor i a l the l atest vers i on (Bootstrap 3) was down l oaded.File structurePrecompiled BootstrapOnce the comp il ed vers i on Bootstrap i s down l oaded, extract the ZIP f il e, and you w ill seethe fo ll ow i ng f il e/d i rectory structure:3As you can see, there are comp il ed CSS and JS (bootstrap.*), as we ll as comp il ed and m i n i f i ed CSS and JS (bootstrap.m i n.*). Fonts from G l yph i cons are i nc l uded, as i t i s the opt i ona l Bootstrap theme.Bootstrap Source CodeIf you have down l oaded the Bootstrap source code then the f il e structure wou l d be as fo ll ows:∙The f il es under l ess/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and i con fonts (respect i ve l y).∙The d i st/ fo l der i nc l udes everyth i ng li sted i n the precomp il ed down l oad sect i on above.∙docs-assets/, examp l es/, and a ll*.htm l f il es are Bootstrap documentat i on. HTMLT emplateA bas i c HTML temp l ate us i ng Bootstrap wou l d l ook li ke th i s:<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--><!-- WARNING: Respond.js doesn't work if you view the pagevia file:// --><!--[if lt IE 9]><script src="https:///libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https:///libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https:///jquery.js"></script><!-- Include all compiled plugins (below), or include individual files as needed--><script src="js/bootstrap.min.js"></script></body></html>Here you can see the jquery.js,bootstrap.min.js and bootstrap.min.css f il es thatare i nc l uded to make a norma l HTM f il e to the Bootstrapped Temp l ate. Just make sure toi nc l ude jQuery li brary before you i nc l ude Bootstrap li brary.More deta il s about each of the e l ements i n th i s above p i ece of code w ill be d i scussed i nthe chapter Bootstrap CSS Overv i ew.Th i s temp l ate structure i s a l ready i nc l uded as part of the Try it(on li ne comp il er) too l. Hence i n a ll the examp l es (i n the fo ll ow i ng chapters) of th i s tutor i a l you w ill on l y see the contents of the <body> e l ement. Once you c li ck on the Try it opt i on ava il ab l e at the topr i ght corner of examp l e, and you w ill see the ent i re code.ExampleNow l et's try an examp l e us i ng the above temp l ate. Try the fo ll ow i ng examp l e us i ng Tryi t opt i on ava il ab l e at the top r i ght corner of the be l ow samp l e code box on our webs i te:<h1>Hello, world!</h1>In a ll the subsequent chapters we have used dummy text from the s i te http://www.li /.5In th i s chapter, we sha ll d i scuss the Bootstrap Gr i d System.Whatis a Grid?As put by W i kiped i a:In graph i c des i gn, a gr i d i s a structure (usua ll y two-d i mens i ona l) made up of a ser i es ofi ntersect i ng stra i ght (vert i ca l, hor i zonta l) li nes used to structure the content. It i s w i de l y used to des i gn l ayout and content structure i n pr i nt des i gn. In web des i gn, i t i s a very effect i ve method to create a cons i stent l ayout rap i d l y and effect i ve l y us i ng HTML and CSS.To put i n s i mp l e words, gr i ds i n web des i gn organ i ze and structure content, makes the webs i tes easy to scan and reduces the cogn i t i ve l oad on users.Whatis Bootstrap Grid System?As put by the off i c i a l documentat i on of Bootstrap for gr i d system:Bootstrap i nc l udes a respons i ve, mob il e f i rst f l u i d gr i d system that appropr i ate l y sca l esup to 12 co l umns as the dev i ce or v i ewport s i ze i ncreases. It i nc l udes predef i ned c l assesfor easy l ayout opt i ons, as we ll as powerfu l m i x i ns for generat i ng more semant i c l ayouts.Let us understand the above statement. Bootstrap 3 i s mob il e f i rst i n the sense that the code for Bootstrap now starts by target i ng sma ll er screens li ke mob il e dev i ces, tab l ets, and th en “expand s” components and gr i ds for l arger screens such as l aptops, desktops.Mobile First Strategy∙Contento Determ i ne what i s most i mportant.∙Layouto Des i gn to sma ll er w i dths f i rst.o Base CSS address mob il e dev i ce f i rst; med i a quer i es address for tab l et,desktops.∙Progressive Enhancemento Add e l ements as screen s i ze i ncreases.Working ofBootstrap GridSystemGr i d systems are used for creat i ng page l ayouts through a ser i es of rows and co l umns that house your content. Here's how the Bootstrap gr i d system works:∙ Rows must be p l aced w i th i n a .container c l ass for proper a li gnment and padd i ng.∙ Use rows to create hor i zonta l groups of co l umns. 6∙Content shou l d be p l aced w i th i n the co l umns, and on l y co l umns may be thei mmed i ate ch il dren of rows.∙Predef i ned gr i d c l asses li ke .row and.col-xs-4 are ava il ab l e for qu i ck l y mak i ng gr i d l ayouts. LESS m i x i ns can a l so be used for more semant i c l ayouts.∙Co l umns create gutters (gaps between co l umn content) v i a padd i ng. That padd i ng i s offset i n rows for the f i rst and the l ast co l umn v i a negat i ve marg i non .rows.∙Gr i d co l umns are created by spec i fy i ng the number of twe l ve ava il ab l e co l umns you w i sh to span. For examp l e, three equa l co l umns wou l d use three .col-xs-4.Media QueriesMed i a query i s a rea ll y fancy term for "cond i t i ona l CSS ru l e". It s i mp l y app li es some CSS, based on certa i n cond i t i ons set forth. If those cond i t i ons are met, the sty l e i sapp li ed.Med i a Quer i es i n Bootstrap a ll ow you to move, show and h i de content based on thev i ewport s i ze. Fo ll ow i ng med i a quer i es are used i n LESS f il es to create the key breakpo i nts i n the Bootstrap gr i d system./* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */@media (min-width: @screen-sm-min) { ... }/* Medium devices (desktops, 992px and up) */@media (min-width: @screen-md-min) { ... }/* Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... }Occas i ona ll y these are expanded to i nc l ude a max-w i dth to li m i t CSS to a narrower setof dev i ces.@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Med i a quer i es have two parts, a dev i ce spec i f i cat i on and then a s i ze ru l e. In the above case, the fo ll ow i ng ru l e i s set:7Let us cons i der th i s li ne:@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }For a ll dev i ces no matter what k i nd w i th m i n-w i dth:@screen-sm-m i n,i f the w i dth of the screen gets sma ll er than @screen-sm-max, then do someth i ng.Grid OptionsThe fo ll ow i ng tab l e summar i zes aspects of how Bootstrap gr i d system works across mu l t i p l e dev i ces:Extra small devices Phones (<768px) Small devicesTablets(≥768px)MediumdevicesDesktops(≥992px)Large devicesDesktops(≥1200px)Gr i d behav i or Hor i zonta l ata ll t i mesCo ll apsed tostart, hor i zonta labovebreakpo i ntsCo ll apsed tostart, hor i zonta labovebreakpo i ntsCo ll apsed tostart, hor i zonta labovebreakpo i ntsMaxconta i nerw i dthNone (auto) 750px 970px 1170pxC l asspref i x .col-xs- .col-sm- .col-md- .col-lg-# ofco l umns 12 12 12 12Maxco l umnw i dthAuto 60px 78px 95pxGutter w i dth 30px(15px on eachs i de of aco l umn)30px(15px on eachs i de of aco l umn)30px(15px on eachs i de of aco l umn)30px(15px on each s i deof a co l umn)Nestab l e Yes Yes Yes YesOffsets Yes Yes Yes Yes8Bootstrap Co l umnorder i ng Yes Yes Yes YesBasic Grid StructureFo ll ow i ng i s bas i c structure of Bootstrap gr i d:<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div></div><div class="row">...</div></div><div class="container">....Let us see some s i mp l e gr i d examp l es:Example:Stacked-to-horizontalLet us see a s i mp l e gr i d examp l e w i th s i mp l e l ayout: two co l umns, two paragraphs perco l umn. (Here sty li ng for each co l umn i s used. You can avo i d i t.)<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-6" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.</p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beataevitae dicta sunt explicabo.</p>9</div><div class="col-md-6" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium.</p><p> Neque porro quisquam est, qui dolorem ipsum quia dolor sitamet, consectetur, adipisci velit, sed quia non numquam eiusmodi tempora incidunt ut labore et dolore magnam aliquam quaeratvoluptatem.</p></div></div>Details∙<div class="container">...</div> e l ement i s added to ensure proper center i ng and max i mum w i dth for l ayout.∙Once conta i ner i s added, next you need to th i nk i n terms of rows. Add <div class="row">...</div> and co l umns <div class="col-md-6"></div>i ns i dethe rows.∙Every row i n the gr i d i s made up of 12 un i ts and you can def i ne the des i red s i ze of your co l umns us i ng those un i ts. In our examp l e we have two co l umns eachmade of 6 un i ts w i de i.e 6+6=12.You can try some more opt i ons li ke:<d i v c l ass="co l-md-3"></d i v> and <d i v c l ass="co l-md-9"></d i v>or <d i v c l ass="co l-md-7"></d i v> and <d i v c l ass="co l-md-5"></d i v>.Exper i ment and make sure that the sum a l ways needs to be 12.10Example:Medium and Large DeviceWe have seen the bas i c gr i d system i n ‘Examp l e: Stacked-to-hor i zonta l’. Here we have used 2 d i vs and gave them the 50%/50% sp li t at the med i um v i ewport w i dth:<div class="col-md-6">....</div><div class="col-md-6">....</div>But at l arge, your des i gn cou l d rea ll y be better as a 33%/66%. So what we’re go i ng todo i s, set i t up to change the co l umn w i dths at the breakpo i nt:<div class="col-md-6 col-lg-4">....</div><div class="col-md-6 col-lg-4">....</div>Now Bootstrap i s go i ng to say “at the med i um s i ze, I l ook at c l asses w i th md i n themand use those. At the l arge s i ze, I l ook at c l asses w i th the word lg i n them and use those. In th i s case, our 2 d i vs w ill go from a 50%/50% sp li t and then up to a 33%/66%. Check i t out i n the fo ll ow i ng examp l e. (Here sty li ng for each co l umn i s used. You canavo i d i t.)<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.</p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beataevitae dicta sunt explicabo.</p></div><div class="col-md-6 col-lg-8"" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">11<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium.</p><p> Neque porro quisquam est, qui dolorem ipsum quia dolor sitamet, consectetur, adipisci velit, sed quia non numquam eiusmodi tempora incidunt ut labore et dolore magnam aliquam quaeratvoluptatem.</p></div></div>Example:Mobile,tablet,desktopsWe have seen an examp l e for Med i um and Large Dev i ce. Now l et us take i t to anotherl eve l, where we wou l d want to change i t for the extra sma ll phone s i ze as we ll. Say wewant to add the opt i on for the co l umns to be sp li t 75%/25% for tab l ets, we go li ke th i s:<div class="col-sm-3 col-md-6 col-lg-4">....</div><div class="col-sm-9 col-md-6 col-lg-8">....</div>Now th i s g i ves us 3 d i fferent co l umn l ayouts at each po i nt. On a phone, i t w ill be 75% onthe l eft, and 25% on the r i ght. On a tab l et, i t w ill be 50%/50% aga i n, and on a l argev i ewport, i t w ill be 33%/66%. Three d i fferent l ayouts for each of the three respons i ves i zes. Check i t out i n the fo ll ow i ng examp l e. (Here sty li ng for each co l umn i s used. Youcan avo i d i t.)<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-sm-3 col-md-6 col-lg-8"style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444,12inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beatae vitae dictasunt explicabo.</p> </div><div class="col-sm-9 col-md-6 col-lg-4"style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px#444;"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium.</p><p> Neque porro quisquam est, qui dolorem ipsum quia dolor sitamet, consectetur, adipisci velit, sed quia non numquam eiusmodi tempora incidunt ut labore et dolore magnam aliquam quaeratvoluptatem.</p></div></div>13。
