自我总结41
Bootstrap
BootCDN支持免费加速服务，包括http/https （女孩子有没有穿衣服区别）
前端框架 Bootstrap
基于JQuery的，所以你用框架动态效果的时候，必须确保先导入JQuery
即：用Bootstrap之前，先导入JQuery
你需要导三个文件
第一个是jQuery
第二个是css文件
第三个是js文件
布局容器
使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的
<div class="container"></div> 左右两边留白
<div class="container-fluid"></div> 全屏显示
栅格系统
默认情况下
一个row就是一行,每个row默认会均分成12份
你可以通过col-md-Num 来选择你想要占几份
媒体查询
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在 | 一起的，当大于这些 | 阈值时将变为水平排列C |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
排版
标题
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
内联文本元素
插入文本
<ins>This line of text is meant to be treated as an addition to the document.</ins>
着重
The following snippet of text is<strong>rendered as bold text</strong>
斜体
The following snippet of text is<em>rendered as italicized text</em>
对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
缩略语/首字母缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
引用
在你的文档中引用其他来源的内容
默认样式的引用
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，建议用 <p> 标签
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
列表
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素
<ul class="list-unstyled">
<li>...</li>
</ul>
表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
<table class="table">
...
</table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
<table class="table table-striped">
...
</table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框
<table class="table table-bordered">
...
</table>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
<table class="table table-hover">
...
</table>
状态类
| Class | 描述 |
|---|---|
| .active | 鼠标悬停在行或单元格上时所设置的颜色 |
| .success | 标识成功或积极的动作 |
| .info | 标识普通的提示信息或动作 |
| .warning | 标识警告或需要用户注意 |
| .danger | 标识危险或潜在的带来负面影响的动作 |
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">数据展示</h2>
<table class="table table-hover table-striped">
<thead>
<tr class="success">
<th>用户名</th>
<th>密码</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>jason</td>
<td>123</td>
<td>学习</td>
</tr>
<tr class="info">
<td>jason1</td>
<td>123</td>
<td>学习</td>
</tr>
<tr class="danger">
<td>jason2</td>
<td>123</td>
<td>学习</td>
</tr>
<tr class="active">
<td>jason3</td>
<td>123</td>
<td>学习</td>
</tr>
<tr>
<td class="success">jason4</td>
<td class="active">123</td>
<td class="danger">学习</td>
</tr>
</tbody>
</table>
</div>
</div>
表单
表单加样式 你只需要记一个 form-control
按钮组 btn btn-颜色
浮动
pull-left 左浮动 pull-right 右浮动
按钮组
btn btn-颜色
!important 执行优先级最高
