搜索
BootStrap入门学习Part1Bootstrap简介•什么是Bootstrap？–Bootstrap是由Twitter的MarkOtto和JacobThornton两位设计师开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。–Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。–Bootstrap是基于HTML、CSS、JAVASCRIPT的。–Bootstrap简洁灵活，使得Web开发更加快捷。–Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。•为什么使用Bootstrap？–移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。–浏览器支持。所有的主流浏览器都支持。–容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。–响应式设计。Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机Bootstrap环境安装•Bootstrap下载–下载的中文地址：环境安装•使用Bootstrap中文网提供的免费CDN加速服务–Bootstrap中文网为Bootstrap专门构建了自己的免费CDN加速服务。基于国内云厂商的CDN服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap中文网还对大量的前端开源工具库提供了CDN加速服务，请进入BootCDN()主页查看更多可用的工具库。•什么是CDN加速服务？–CDN的全称是ContentDeliveryNetwork，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。Bootstrap基本模板•Bootstrap模板注意事项–Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。–Bootstrap文件当字符集设置，也要遵循HTML5的规范。–设置IE浏览器兼容模式(X-UA-Compatible)。–设置模板，适用于所有平台(viewport)。–引入bootstrap的CSS主文件(bootstrap.min.css)。–引入jQuery插件的主文件(jQuery)–引入bootstrap的JS主文件(bootstrap.min.js)全局CSS样式——概述•HTML5文档类型–Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。•移动设备优先–Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在head之中添加viewport元数据标签。全局CSS样式——概述•禁用移动设备上的缩放功能–在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。•布局容器–Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。–.container类用于固定宽度并支持响应式布局的容器。–.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。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全局样式——表格•响应式表格–将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。–垂直方向的内容截断：响应式表格使用了overflow-y:hidden属性，这样就能将超出表格底部和顶部的内容截断。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–链接：