BootStrap入门学习

BootStrap入门学习Part1Bootstrap简介Bootstrap环境安装Bootstrap环境安装Bootstrap基本模板全局CSS样式——概述•HTML5文档类型–Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。•移动设备优先–Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在head之中添加viewport元数据标签。全局CSS样式——概述CSS全局样式——排版•标题–HTML中的所有标题标签，h1到h6均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。–在标题内还可以包含small标签或赋予.small类的元素，可以用来标记副标题。•页面主体–Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予body元素和所有段落元素。另外，p（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。CSS全局样式——排版•内联文本元素–被删除的文本：delHTML5删除文本/del、sXHTML删除文本/s–插入的文件：ins插入文本/ins–下划线的文本：u下划线文本/u–小号文本：small/small或.small–着重文本：strong/strong–斜体文本：em/em•文本对齐–class=“text-left”文本左对齐–class=“text-right”文本右对齐–class=“text-center”文本中对齐–class=“text-justify”文本两端对齐–class=“text-nowrap”禁止文本换行CSS全局样式——排版•改变大小写–class=“text-lowercase”转成小写–class=“text-uppercase”转成大写–class=“text-capitalize”首字母大写•无序列表——顺序无关紧要的一组元素•有序列表——顺序至关重要的一组元素•无样式列表–ulclass=“list-unstyled”……/ul–olclass=“list-unstyled”……/ol•内联列表–通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。ulclass=“list-inline”……/ulCSS全局样式——表格•表格全局类样式–描述：为任意table标签添加.table类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。–举例：tableclass=“table”.../table•条纹状表格——表格隔行变色–描述：通过.table-striped类可以给tbody之内的每一行增加斑马条纹样式。–举例：tableclass=tabletable-striped.../table•带边框的表格–描述：添加.table-bordered类为表格和其中的每个单元格增加边框。–举例：tableclass=tabletable-bordered.../tableCSS全局样式——表格•鼠标悬停–通过添加.table-hover类可以让tbody中的每一行对鼠标悬停状态作出响应。–tableclass=tabletable-hover.../table•紧缩表格–通过添加.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。–tableclass=tabletable-condensed.../table•状态类–通过这些状态类可以为行或单元格设置颜色。–.active鼠标悬停在行或单元格上时所设置的颜色–.success标识成功或积极的动作–.info标识普通的提示信息或动作–.warning标识警告或需要用户注意–.danger标识危险或潜在的带来负面影响的动作CSS全局样式——表格CSS全局样式——表单•表单样式概述–单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。•基本实例placeholder属性描述：提供可描述输入字段预期值的提示信息说明：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。是HTML5新属性。placeholder属性适用于以下的input类型：text,search,url,tel,email以及password。CSS全局样式——表单•基本实例–不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。CSS全局样式——表单•内联表单–为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在768px宽度时（视口宽度再小的话就会使表单折叠）。–对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。CSS全局样式——表单•水平排列的表单–通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。CSS全局样式——表单•被支持的控件–输入框•包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。•举例：inputtype=“text”class=“form-control”•注意：只有正确设置了type属性的输入控件才能被赋予正确的样式。–文本域•举例：textareaclass=form-controlrows=3/textarea–单选项和复选框•通过将.checkbox-inline或.radio-inline类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。•举例：labelclass=checkbox-inlineinputtype=checkboxvalue=画画画画/labelCSS全局样式——表单•下拉列表–通过给select标记添加.form-control样式来实现效果。–selectclass=form-control……/select–对于标记了multiple属性的select控件来说，也可添加该样式.form-control。–selectmultipleclass=“form-control”/selectCSS全局样式——按钮•可作为按钮使用的标签或元素–为a、button或input元素添加按钮类（buttonclass）即可使用Bootstrap提供的样式。–虽然按钮类可以应用到a和button元素上，但是，导航和导航条组件只支持button元素。–如果a元素被作为按钮使用，那么，务必为其设置role=“button”属性。–兼容性：强烈建议尽可能使用button元素来获得在各个浏览器上获得相匹配的绘制效果。CSS全局样式——按钮•预定义样式–默认样式：buttonclass=“btnbtn-default”default/button–首选项：buttonclass=“btnbtn-primary”primary/button–成功：buttonclass=“btnbtn-success”success/button–一般信息：buttonclass=“btnbtn-info”info/button–警告：buttonclass=“btnbtn-warning”warning/button–危险：buttonclass=“btnbtn-danger”Danger/button–链接：buttonclass=“btnbtn-link”Link/button–•按钮激活和禁用状态–激活状态(.active)：buttontype=buttonclass=btnbtn-primaryactive–禁用状态：buttonclass=btnbtn-defaultdisabled='disabled'CSS全局样式——按钮•按钮尺寸–使用.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮。–Largebutton(大按钮)：.btn-lg–Smallbutton(小按钮)：.btn-sm–Extrasamllbutton(超小按钮)：.btn-xs–通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。CSS全局样式——图片•响应式图片–在Bootstrap版本3中，通过为图片添加.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width:100%;、height:auto;和display:block;属性，从而让图片在其父元素中更好的缩放。–如果需要让使用了.img-responsive类的图片水平居中，请使用.center-block类，不要用.text-center。–举例：imgsrc=images/01.jpgclass=img-responsivecenter-block•图片形状–圆角图片：imgsrc=...class=img-rounded–圆形图片：imgsrc=...class=img-circle–边框圆角：imgsrc=...class=img-thumbnail–注意：InternetExplorer8不支持CSS3中的圆角属性。CSS全局样式——辅助类•文本颜色类–柔和的：pclass=text-muted.../p–首选项：pclass=text-primary.../p–成功：pclass=text-success.../p–信息：pclass=text-info.../p–警告：pclass=text-warning.../p–危险：pclass=text-danger.../p•背景颜色类–pclass=bg-primary/p–pclass=bg-success/p–pclass=bg-info/p–pclass=bg-warning/p–pclass=bg-danger/pCSS全局样式——辅助类CSS全局样式——辅助类•清除浮动–通过为父元素添加.clearfix类可以很容易地清除浮动（float）。–divclass=clearfix–divclass=pull-left/div–divclass=pull-right/div–/div•显示和隐藏内容–.show和.hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。–divclass=show.../div–divclass=hidden.../divCSS全局样式——栅格系统•栅格系统介绍–Bootstrap提供了一套响应式、移动设备优先的流式