2.bootstrap全局css样式

全局css样式CONTENT全局样式概述01栅格系统02排版03代码和表格04表单05按钮06全局css样式概述INTRODUCTION01bootstrap01设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统。bootstrap01HTNL5文档类型Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。bootstrap01移动设备优先为了确保适当的绘制和触屏缩放，需要在head之中添加viewport元数据标签。在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！bootstrap01排版与链接Bootstrap排版、链接样式设置了基本的全局样式。分别是：——为body元素设置background-color:#fff;——使用@font-family-base、@font-size-base和@line-height-basea变量作为排版的基本参数——为所有链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线这些样式都能在scaffolding.less文件中找到对应的源码。bootstrap01布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。.container类用于固定宽度并支持响应式布局的容器.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。栅格系统02bootstrap02栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。bootstrap02移动设备优先策略内容——决定什么是最重要的。布局——优先设计更小的宽度。基础的CSS是移动设备优先，媒体查询是针对于平板电脑、台式电脑。渐进增强——随着屏幕大小的增加而添加元素。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。bootstrap02Bootstrap栅格系统（GridSystem）的工作原理网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统是如何工作的：——行必须放置在.containerclass内，以便获得适当的对齐（alignment）和内边距（padding）。——使用行来创建列的水平组。——内容应该放置在列内，且唯有列可以是行的直接子元素。——预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多语义布局。——列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第一列和最后一列的行偏移。——网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。bootstrap02媒体查询在栅格系统中，我们在Less文件中使用以下媒体查询（mediaquery）来创建关键的分界点阈值我们偶尔也会在媒体查询代码中包含max-width从而将CSS的影响限制在更小范围的屏幕大小之内。bootstrap02栅格参数栅格系统实例bootstrap02列偏移使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度。列偏移实例bootstrap02列排序通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序。列排序实例bootstrap02列嵌套为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。列嵌套bootstrap02Lessmixin和变量除了用于快速布局的预定义栅格类，Bootstrap还包含了一组Less变量和mixin用于帮你生成简单、语义化的布局。排版03bootstrap02标题HTML中的所有标题标签，h1到h6均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含small标签或赋予.small类的元素，可以用来副标题。标题实例bootstrap02页面主体Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予body元素和所有段落元素。另外，p（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。中心内容通过添加.lead类可以让段落突出显示。pclass=lead.../pbootstrap02使用Less工具构建variables.less文件中定义的两个Less变量决定了排版尺寸：@font-size-base和@line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。bootstrap02内联文本元素被删除的文本对于被删除的文本使用del标签。无用文本对于没用的文本使用s标签。插入文本额外插入的文本使用ins标签。带下划线的文本为文本添加下划线，使用u标签。利用HTML自带的表示强调意味的标签来为文本增添少量样式。小号文本——对于不需要强调的inline或block类型的文本，使用small标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的small元素被设置不同的font-size。你还可以为行内元素赋予.small类以代替任何small元素。着重——通过增加font-weight值强调一段文本。斜体——用斜体强调一段文本。实例bootstrap02内联文本元素对齐通过文本对齐类，可以简单方便的将文字重新对齐。改变大小写通过这几个类可以改变文本的大小写。缩略语当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的abbr元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上,但需要包含title属性。地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加br可以保留需要的样式。默认样式的引用将任何HTML元素包裹在blockquote中即可表现为引用样式。对于直接引用，我们建议用p标签。实例bootstrap02列表list-unstyled这是针对直接子元素的list-inline将所有元素放置于同一行无序列表——排列顺序无关紧要的一列元素。有序列表——顺序至关重要的一组元素。无样式列表——移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。内联列表——通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。描述——带有描述的短语列表。水平排列的描述.dl-horizontal可以让dl内的短语及其描述排在一行。开始是像dl的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。自动截断通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。列表实例代码和表格04bootstrap04代码内联代码通过code标签包裹内联样式的代码片段。用户输入通过kbd标签标记用户通过键盘输入的内容。=代码块多行代码可以使用pre标签。为了正确的展示代码，注意将尖括号做转义处理。还可以使用.pre-scrollable类，其作用是设置max-height为350px，并在垂直方向展示滚动条。变量通过var标签标记变量。程序输出通过samp标签来标记程序输出的内容。代码实例表格05bootstrap05表格基本实例为任意table标签添加.table类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。条纹状表格——通过.table-striped类可以给tbody之内的每一行增加斑马条纹样式。带边框的表格——添加.table-bordered类为表格和其中的每个单元格增加边框。鼠标悬停——通过添加.table-hover类可以让tbody中的每一行对鼠标悬停状态作出响应。紧缩表格——通过添加.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。状态类——通过这些状态类可以为行或单元格设置颜色。响应式表格将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。表格实例表单06bootstrap06表单基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。内联表单为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在768px宽度时（视口宽度再小的话就会使表单折叠）。水平排列的表单通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。表单实例bootstrap06被支持的控件输入框包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。文本域支持多行文本的表单控件。可根据需要改变rows属性。多选和单选框多选框