Bootstrap学习
1:Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。
2 :栅格系统(布局)
下面就介绍以下Bootstrap栅格系统的工作原理:
“行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
使用“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
代码介绍:
1..container:用.container
包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width
,用以匹配栅格系统。
2..col-xs-4:这个类通过"-"分为三个部分,第三个部分的数字作为一个泛指,它的范围是1到12。就是可以把一个区域分为12个栏,这个要和row类联合使用。
3:排版
1:提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
2:在标题内还可以包含<small>标签或.small元素,可以用来标记副标题。
3:小号,着重,斜体,对齐class :<p>Left aligned text.</p>
强调class:<p>Mae n magna.</p>
代表着各种不同的颜色
引用选项
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。
<blockquote>
<p>生命的意义不仅限于生存,云在青天水在瓶。</p>
<small>本文来自于:<cite title="http:www.hehehe.com">来源链接</cite></small>
</blockquote>
4:表格
鼠标悬停
利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。
<table class="table table-hover">
5:按钮
1、选项
使用上面列出的class可以快速创建一个带有样式的按钮。
6:下拉菜单
将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码
首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表
紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。
第四个li标签中有个divider其实是一个分割线的样式类。
7:导航
Bootstrap中可用的导航有相似的标记,用基类.nav
开头,这是相似的部分。改变修饰类可以改变样式。
标签页注意.nav-tabs类需要.nav基类。:
1. <h1 class="page-header">标签页</h1>
2. <ul class="nav nav-tabs">
3. <li class="active"><a href="#">主页</a></li>
4. <li><a href="#">属性</a></li>
5. <li><a href="#">信息</a></li>
6. </ul>