Bootstrap课件v1.0

一、概述Bootstrap是Twitter公司开发的一个基于HTML、CSS、JAVASCRIPT的、用于快速开发Web应用程序和网站的前端框架，集合了最新的前端的技术，为web程序快速开发提供了一套前端工具包，包括布局、栅格、表格、按钮、表单、导航等。特点：由Twitter团队推动，保证技术的领先，保证后续的产品推动。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。丰富的内置组件。它包含了功能强大的内置组件，易于定制。容易上手，只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。浏览器的支持：所有的主流浏览器都支持Bootstrap。下载：Bootstrap提供三种下载版本1.用于生产环境的Bootstrap.编译并压缩后的CSS、JavaScript和字体文件。不包含文档和源码文件。2.Bootstrap源码Less、JavaScript和字体文件的源码，并且带有文档。需要Less编译器和一些设置工作。3.Sass这是Bootstrap从Less到Sass的源码移植项目，用于快速地在Rails、Compass或只针对Sass的项目中引入安装：1.CDN加载方式：2.本地加载加载方式：第一个例子：!DOCTYPEhtmlhtmlheadmetacharset=utf-8metaname=viewportcontent=initial-scale=1.0,maximum-scale=1.0,user-scalable=no/titlehelloworld/title!--引用bootstrap样式--linkrel=stylesheethref=css/bootstrap.min.css/title第一个例子-导航页签的实现/title/headbody!--1.使用.nav（导航）和.nav-tabs(标签页)/nav-pills(胶囊式标签页)实现导航页签2.通过data-toggle=tab定义动作3.通过aria-controls定义切换目标注意：aria-*是HTML5新加的属性。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。主要是支持一些读屏设备。比如盲人。--ulclass=navnav-tabs!--ulclass=navnav-pills--!--ulclass=navnav-tabsrole=tablist--lirole=presentationclass=activeahref=#homearia-controls=homedata-toggle=tabtab1/a/lilirole=presentationahref=#profilearia-controls=profiledata-toggle=tabtab2/a/lilirole=presentationahref=#messagesaria-controls=messagesdata-toggle=tabtab3/a/lilirole=presentationahref=#settingsaria-controls=settingsdata-toggle=tabtab4/a/li/ul!--Tabpanes--divclass=tab-contentdivrole=tabpanelclass=tab-paneactiveid=homeimgsrc=img/1.png//divdivrole=tabpanelclass=tab-paneid=profileimgsrc=img/2.png//divdivrole=tabpanelclass=tab-paneid=messagesimgsrc=img/3.png//divdivrole=tabpanelclass=tab-paneid=settingsimgsrc=img/4.png//div/div!--2.引用jquery的js库3.引用bootstrap的js库--scripttype=text/javascriptsrc=js/jquery.min.js/scriptscripttype=text/javascriptsrc=js/bootstrap.min.js/script/body/html二、栅格Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。注意：1.对于超小屏幕手机，如果定义了类的额，总是水平排列。2.对于小屏幕、中等屏幕、大屏幕，开始是堆叠的，当大于规定的阈值时候，会变成水平排列。1.基本例子divclass=containerdivclass=rowdivclass=col-md-4imgsrc=img/1.pngclass=img-responsive/divh3abootstrap课程/a/h2p描述/p/div/divdivclass=col-md-4imgsrc=img/1.pngclass=img-responsive/divh3abootstrap课程/a/h2p描述/p/div/divdivclass=col-md-4imgsrc=img/1.pngclass=img-responsive/divh3abootstrap课程/a/h2p描述/p/div/div/div/div2.实例-从堆叠到水平排列divclass=containerdivclass=rowdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/div/divdivclass=rowdivclass=col-md-8.col-md-8/divdivclass=col-md-4.col-md-4/div/divdivclass=rowdivclass=col-md-4.col-md-4/divdivclass=col-md-4.col-md-4/divdivclass=col-md-4.col-md-4/div/divdivclass=rowdivclass=col-md-6.col-md-6/divdivclass=col-md-6.col-md-6/div/div/div3.实例-流式布局流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕。将最外面的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。divclass=container-fluiddivclass=rowdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/divdivclass=col-md-1.col-md-1/div/divdivclass=rowdivclass=col-md-8.col-md-8/divdivclass=col-md-4.col-md-4/div/div4.实例：多余的列（column）将另起一行排列divclass=containerdivclass=rowdivclass=col-xs-9.col-xs-9/divdivclass=col-xs-4.col-xs-49+412，所以这个DIV的内容将另起一列显示。/divdivclass=col-xs-6.col-xs-6brSubsequentcolumnscontinuealongthenewline./div/div/div5.列偏移使用.col-md-offset-*类可以将列向右侧偏移。divclass=containerdivclass=rowdivclass=col-md-4.col-md-4/divdivclass=col-md-4col-md-offset-4.col-md-4.col-md-offset-4/div/divdivclass=rowdivclass=col-md-3col-md-offset-3.col-md-3.col-md-offset-3/divdivclass=col-md-3col-md-offset-3.col-md-3.col-md-offset-3/div/divdivclass=rowdivclass=col-md-6col-md-offset-3.col-md-6.col-md-offset-3/div/div/div6.列嵌套为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。列嵌套例子：divclass=containerdivclass=rowdivclass=col-md-4divid=id1class=thumbnailimgsrc=img/1.pngwidth=100%/divh3abootstrap课程/a/h2p描述/p/div/div/divdivclass=col-md-4divclass=col-md-6我是第一列/divdivclass=col-md-6我是第2列/div/div/div/div三、表单1.基础表单Bootstrap对基础表单未做太多的定制化效果设计，默认都使用全局设置，只是对表单内的fieldset、legen