BootStrap 学习笔记
准确说是一个CSS框架。
11.29
1.bootstrap安装:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Bootstrap要求必须是HTML5类型
<!doctype html>
移动端设备的真实宽度:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器:
.container
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
.row 一行12列
.col-md-4 占三列的宽(每列四份)
想要在一行中出现n个相同的布局,则用12/n。
栅格系统工作原理:
- “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。
可以嵌套使用,把子标签当成下一级的父标签,接着分成12份。
<div class="col-md-4 col-md-offset-4"> //可以在前面空出一个宽为4份的格子。
<div class="col-md-4 pull-left"> //会发生向左浮动
3、排版,代码,按钮
- 标题(.page-header):着重强调了一下,并且标题的下面增加了一条灰色的线
- 段落 (.lead) :对段落也有了强调的功能 调节了样式,间距这些
- 标题样式 :
- 内联文本元素:
- Mark text <.mark> hightlight 高光标记。
- del删除线
- 无用文本(.s)和删除线一样
- Small <.small> 字体稍微变小一点。
- 文本对齐 <.text-left> 左边对齐 <.text-center> 中间对其 <.text-right> 右边
<.text-justify> 领端对齐
- 文本大小写 <.text-lowercase> 全部小写 <.text-uppercase>全部大写
<.text-capitalize> 单词首字母大写
- 插入文本(.ins)
- 带下划线的文本(.u)和插入文本是一样的
- 小号文本(.small)
- 列表
有序无序列表:
<ul>
<li>…</li>
</ul>
有序列表:
<ol>
<li>…</li>
</ol>无样式列表
<ul class=”list-unstyle”>
<li>…</li>
</ul>
内联列表
无样式列表<.list-unstyled>
- 描述(自定义列表)带有描述的列表
- 水平排列列表<.dl-horizontal>
代码
- <pre>标签 多行代码可以使用 ,按照原格式输出,也就是可以实现代码的换行这种,并且在外面还加了一个div框,背景是灰色的,圆角。
- <code>标签,字体和背景都会变成红色的,有一种代码的感觉
- <var>标签,对应字段变成斜体,和<i>一样
- <.kbd>对应字段背景变黑
- 程序输出 <samp> 标记程序输出的内容
表格:
<table class=“table table-striped table-bordered table-hover table-condensed”>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<.table> //生成比较专业的表格,会调节一下边距
<. table-striped > // 会出现横条的行
<. table-bordered > //会出现竖条的列
<. table-hover > //会出现鼠标移动的一些效果,移动到哪一格子,哪一个会背景会改变
<. table-condensed > //视窗变下的时候,会紧缩表格,其实不加也会紧缩,但是效果会有一点点不同。