Bootstrap

Web前端系列课程CSDN辛兴涛Bootstrap入门课程大纲Bootstrap简介Bootstrap结构Bootstrap的简单使用Bootstrap简介Bootstrap是由Twitter的MarkOtto和JacobThornton开发的，用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架。Bootstrap优点移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。容易上手：只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。Bootstrap结构基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。CSS：Bootstrap自带以下特性：全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件。定制：您可以定制Bootstrap的组件、LESS变量和jQuery插件来得到您自己的版本。Bootstrap使用1.下载bootstrap:2.在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js和bootstrap.min.css文件）注意：为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的head中增加viewport视口metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=noBootstrapCSS1.Bootstrap网格系统2.Bootstrap排版3.Bootstrap代码4.Bootstrap表格5.Bootstrap表单6.Bootstrap按钮7.Bootstrap图像Bootstrap网格系统Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列媒体查询：用来创建Bootstrap网格系统中的关键的分界点，根据不同的视口大小显示不同的内容Bootstrap网格系统额外的小设备收集（768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的最大容器宽度None(auto)750px970px1170pxClass前缀.col-xs-.col-sm-.col-md-.col-lg-列#12121212最大列宽Auto60px78px95pxBootstrap排版1.内联子标题h3我是标题3h3.small我是副标题3h3/small/h32.强调smallstrongem3.缩写abbrtitle=WorldWideWed地址address/address5.引用6.列表Bootstrap代码1.Bootstrap允许你以两种形式显示代码：code标签pre标签注意：请确保你使用pre和code标签时，开始标签和结束标签使用Unicode变体<>2.googleprettify插件的使用注意：要显示代码行号增加样式：li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:decimal;}.linenums{padding-left:5px}Bootstrap表格Bootstrap支持原来的表格元素tablethead：表格标题行容器元素tbody：表格主题内容trtdth：表头(必须在thead中)caption：表格存储内容的总结Bootstrap表格类class=table设置内边距以及水平分割线class=table-striped在内容主体上看到条纹class=table-bordered表格周围增加边框class=table-hover隔行换色class=table-condensed精简表格Bootstrap表格上下文类上下文类，用来改变表格行或单个单元格背景颜色class=activeclass=successclass=warningclass=danger响应式表格divclass=table-responsivetable/divBootstrap表单布局Bootstrap提供了下列类型的表单布局：垂直表单内联表单水平表单Bootstrap垂直表单创建基本表单的步骤：1.向父form元素添加role=form2.把标签和控件放在一个class=form-group的div中，获取最佳间距3.向所有的文本元素inputtextareaselect等，添加class=form-controlBootstrap内联表单如果创建一个表单，他的所有元素是内联的，向左对齐，请向form标签中添加class=form-inline默认情况下，Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用class.sr-only，您可以隐藏内联表单的标签。Bootstrap水平表单创建水平表单步骤：1.向父form元素添加class.form-horizontal2.把标签和控件放在一个带有class.form-group的div中。3.向标签添加class.control-label。Bootstrap支持的表单控件Bootstrap支持最常见的表单控件，主要是input、textarea、checkbox、radio和select。1.输入框：Bootstrap提供了对所有原生的HTML5的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。2.单选框、复选框对一系列复选框和单选框使用.checkbox-inline或.radio-inlineclass，控制它们显示在同一行上。Bootstrap表单控件状态除了:focus状态，Bootstrap还为禁用的输入框定义了样式，并提供了表单验证的class。输入框焦点禁用的输入框input禁用的字段集fieldset验证状态Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class（.has-warning、.has-error或.has-success）即可Bootstrap表单控件大小您可以分别使用class.input-lg和.col-lg-*来设置表单的高度和宽度。Bootstrap按钮任何带有class=btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式，具体如下表所示：class=btn默认的按钮class=btn-primary一组按钮中的初始状态class=btn-success一个成功或积极的动作class=btn-info警告信息的上下文按钮class=btn-warning谨慎采取的动作class=btn-danger潜在危险动作class=btn-link看起来想一个连接，但保持按钮的行为Bootstrap按钮大小获得各种大小按钮的class：class=btn-lgclass=btn-smclass=btn-xsclass=btn-blockBootstrap按钮状态Bootstrap提供了激活、禁用等按钮状态的class激活状态：class=active禁用状态：class=disabled以上按钮的状态也同样适用于锚元素aBootstrap插件(一)1.Bootstrap过渡效果2.Bootstrap模态框3.Bootstrap下拉菜单4.Bootstrap滚动监听5.Bootstrap标签页6.Bootstrap工具提示7.Bootstrap弹出框8.Bootstrap警告框Bootstrap插件(二)1.Bootstrap按钮2.Bootstrap折叠3.Bootstrap轮播4.Bootstrap附加导航过渡效果总结fade默认。淡入淡出到下一页。flip从后向前翻动到下一页。flow抛出当前页面，引入下一页。pop像弹出窗口那样转到下一页。slide从右向左滑动到下一页。slidefade从右向左滑动并淡入到下一页。slideup从下到上滑动到下一页。slidedown从上到下滑动到下一页。turn转向下一页。none无过渡效果。jQueryMobile按钮jQueryMobile中的按钮可通过三种方法创建：使用button元素使用input元素使用data-role=button的a元素jQueryMobile图标使用data-icon属性给按钮增加图标效果data-icon属性规则：在images/icons-png目录中的每个文件名就是data-icon的属性值使用data-iconpos属性来规定图标的位置data-iconpos属性值：top、right、bottom、left定位页眉和页脚放置页眉和页脚的方式有三种：inline-默认。页眉和页脚与页面内容位于行内。fixed-页面和页脚会留在页面顶部和底部。fullscreen-与fixed类似;页面和页脚会留在页面顶部和底部请使用data-position属性来定位页眉和页脚：jQueryMobile导航栏导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需data-role=button）。请使用data-role=navbar属性来定义导航栏：jQueryMobile列表jQueryMobile中的列表视图是标准的HTML列表：有序列表(ol)和无序列表(ul)。如需创建列表，请向ol或ul元素添加data-role=listview。如需为列表添加圆角和外边距，请使用data-inset=true属性：如需规定列表分隔符，请向li元素添加data-role=list-divider属性如需在列表中添加搜索框，请使用data-filter=true属性：作业使用jQueryMobile独立完成一个手机APP，参考携程网、神州租车参考资料：://感谢大家！Thanks！[e-mail]15210347836406173185xxxhttp:/weibo.com/csdnliwei感谢大家！Thanks！[e-mail]15175293089877216091辛兴涛