Bootstrap学习笔记-css布局
一. 了解css布局概要
优点:
通过最基础,最简单的组合来实现网页开发
快速的制作出精美的页面
概要:
使用HTML5文档类型
移动先行
响应式图片
二. 掌握css布局基础排版
基础排版-标题
- bootstrap为传统的标题h1-h6重新定义了标准的样式 使得所有浏览器下显示都一样,可以直接使用h1标签 也可以给 所需要的标签加上对应的class
<h1>标题1</h1>
<span class="h1"> 这同样也是标题1</span>
- bootstrap同步定义了6个class样式(.h1-.h6)可让 非标题元素具有相同的样式,不过class样式没有定义margin-top和padding-top
基础排版-主题内容
- bootstrap为全局设置字体大小font-size为14px,行 间距为字体大小的1.428倍
- p段落标签加了个margin-bottom,大小是行间距的一半突出的段落可以加.lead(可以增大字体,粗细,行间距,margin-bottom)
基础排版-对齐方式
- .text-left 左对齐
.text-center 中间对齐
.text-right 右对齐
<p class="lead">这是一个突出的标签这是一个突出的标签这是一个突出的标签</p>
<p class="text-left">这是一个左对齐的p标签</p>
<p class="text-center">这是一个居中对齐的p标签</p>
<p class="text-right">这是一个右对齐的p标签</p>
基础排版-列表
- 无序列表,有序列表用法还和传统的一样,bootstrap
- 只是对margin和行间距做了微调
- 去点列表(.list-unstyled)
- 内敛列表(.list-inline)
- 水平定义列表(.dl-horizontal)
注意:去点样式列表只会去除其子元素(li)的默认样式, 并不会去除其孙子辈的默认样式,要想去除分别在ul上添加class:list-unstyled
<ul class="list-unstyled">
<li>这是列表1</li>
<li>这是列表2</li>
<li>
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
</ul>
</li>
<li>这是列表4</li>
<li>
<ol>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
</ol>
</li>
<li>这是列表6</li>
</ul>
*内敛列表:即将列表横排 如果需要去除li之间的空隙 可以 在其父元素上使用 display: flex; 可参考关于去除inline block 之间的空格
定义列表:横排(水平排列) 超小屏以上才会生效
<dl class="dl-horizontal">
<dt>标题1</dt>
<dd>这是标题1的内容</dd>
<dt>标题2</dt>
<dd>这是标题2的内容</dd>
<dt>标题3</dt>
<dd>这是标题3的内容</dd>
<dt>标题4</dt>
<dd>这是标题4的内容</dd>
</dl>
基础排版-按钮
可以使用button标签,或者input(type=button),input(type=submit)
a(role=button)的方式来创建你的按钮。
建议使用button标签
bootstrap提供了7种样式的按钮风格
btn-default(默认),btn-primary(视觉加重)
btn-success(成功),btn-info(提示信息)
btn-warning(警告),btn-danger(危险),
btn-link(看起来像链接)
按钮大小
.btn-lg 大型
.btn-sm 小型
.btn-xs 超小型
按钮状态:
活动状态:(按钮颜色变深,边框颜色更深,内置阴影)
.active
禁用状态:(按钮背景色65%透明处理,I9是灰色)
disabled = 'disabled'
.disabled(不禁止按钮的默认行为)
<div class="container">
<button class="btn btn-default">默认按钮</button>
<br/>
<br/>
<button class="btn btn-primary">视觉加重</button>
<br/>
<br/>
<button class="btn btn-success">成功</button>
<br/>
<br/>
<button class="btn btn-info">提示信息</button>
<br/>
<br/>
<button class="btn btn-warning">警告</button>
<br/>
<br/>
<button class="btn btn-danger">危险</button>
<br/>
<br/>
<button class="btn btn-link">看起来像链接</button>
<button class="btn btn-primary btn-lg">视觉加重(大的)</button>
<button class="btn btn-info btn-sm">提示信息(小的)</button>
<button class="btn btn-danger btn-xs">危险(超小的)</button>
<br/>
<br/>
<button class="btn btn-primary active">视觉加重(活动状态)</button>
<button class="btn btn-primary disabled">视觉加重(禁用状态)</button>
</div>
表格
给table添加
.table 表格占满全屏
.table-striped 带背景条纹的表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格
同时也可以给行(tr)或 列(td)添加行级元素样式
.active 表示当前活动的信息
.success 表示成功或正确的信息
.info 标示普通的提示信息或动作
.warning 标示警告或需要用户注意
.danger 标示危险或潜在带来的负面影响
<table class="table table-bordered table-condensed">
<tr class="active">
<th>#</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr class="success">
<td></td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr class="info">
<td></td>
<td>美术</td>
<td>化学</td>
<td>语文</td>
<td>物理</td>
<td>语文</td>
</tr>
<tr class="warning">
<td></td>
<td>数学</td>
<td>语文</td>
<td>生物</td>
<td>历史</td>
<td>语文</td>
</tr>
<tr class="danger">
<td></td>
<td>音乐</td>
<td>语文</td>
<td>政治</td>
<td>化学</td>
<td>数学</td>
</tr>
<tr>
<td></td>
<td>体育</td>
<td class="danger">化学</td>
<td>语文</td>
<td>政治</td>
<td>物理</td>
</tr>
<tr>
<td></td>
<td>语文</td>
<td>化学</td>
<td>美术</td>
<td class="active">哲学</td>
<td>生物</td>
</tr>
</table>
最后在使用这些代码是不要忘记 引入bootstrap 的相关文件 可参考 另一篇文章:关于如何使用bootstrap 和 栅格