目录
Bootstrap
常用样式
排版
标题
- Bootstrap对h1-h6的标题效果进行了覆盖
- 提供了对应的class，为非标题的元素设置样式（h1-h6）
- 副标题 small标签或small类名
<div class="container">
<h1>标题 <small>副标题</small> </h1>
<div class="h2">标题</div>
<h3>标题 <span class="small">副标题</span> </h3>
</div>
测试结果：
段落
通过lead来突出强调内容（其作用就是增大文字字号，加粗文本，而且对行高和margin也做了相应的处理）
<small:小字号
<b:加粗
<i<em:斜体
<p>通过lead来突出强调内容</p>
<p class="lead">通过lead来突出强调内容</p>
测试结果：
强调
-
text-muted：提示 ，使用浅灰色
-
text-primary：主要，使用蓝色
-
text-success：成功，使用浅绿色
-
text-info：通知信息，使用黄色
-
text-warning：警告，使用黄色
-
text-danger：危险，使用褐色
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
测试结果：
对齐效果
在CSS中常常使用text-align来实现文本的对齐风格设置风格：
-
左对齐，left
-
居中对齐，center
-
右对齐，right
-
两端对齐，justify
在Bootstrap通过定义四个类名来控制文本的对齐风格：
- text-left：左对齐
- text-center：居中对齐
- text-right：右对齐
- text-justify：两端对齐
<p class="text-start">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-end">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-left">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-justify">在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
测试结果：
列表
HTML中列表分3中：
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<dl>
<dt>自定义列表</dt>
</dl>
去点列表
<ul class="list-unstyled">
<li>无序列表</li>
<li>无序列表</li>
</ul>
测试结果:
内联列表
就是把垂直列表变成水平列表
<ul class="list-inline">
<li>首页</li>
<li>hello你猜</li>
<li>在线课堂</li>
</ul>
测试结果:
定义列表
把垂直列表变成水平定义列表，当标题宽度超过160px时，就会显示三个省略号
<dl class="dl-horizontal">
<dt>自定义列表</dt>
<dd>自定义列表</dd>
<dt>在Bootstrap通过定义四个类名来控制文本的对齐风格</dt>
<dd>在dt中标题不能超过160px，不然就会"..."</dd>
</dl>
测试结果:
代码
Bootstrap 允许您以两种方式显示代码：
- 第一种是 <code 标签。如果您想要内联显示代码，那么您应该使用 <code 标签。
- 第二种是 <pre 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre标签。如果要显示HTML代码就要用 <；和 >；来表示< 和 >。
- 第二种是 <kbd 标签。使用<kbd标签来显示用户输入代码，如快捷键
这是一行代码 <br>
<code>这是一行代码</code>
<pre>
public class Father{
public void text(){}
}
public class Son extends Father{
@Override //这个是重写的注释
public void text(){}
}
Son s = new Son();
s.text();
Father f = new Son(); //子类重写了父类的方法
f.text(); //都显示子类写的方法
</pre>
<pre>
<h1>hello <h1>
</pre>
<!-- 当长度超过指定值，可以添加滚动条 -->
<pre class="pre-scrollable"></pre>
<p>使用 <kbd>Ctrl</kbd> + <kbd>S</kbd>进行保存 </p>
测试结果：
表格
基本样式: class=“table”
<table>
<thead>
<tr>
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaSE</td>
<dd>面对对象</dd>
</tr>
<tr>
<td>数据库</td>
<td>MySQL</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaSE</td>
<dd>面对对象</dd>
</tr>
<tr>
<td>数据库</td>
<td>MySQL</td>
</tr>
</tbody>
</table>
测试结果：
表格类型
| 表格类型 | 作用 |
|---|---|
| table-striped | 在 <tbody 内添加斑马线形式的条纹 ( IE8 不支持) |
| table-bordered | 为所有表格的单元格添加边框 |
| table-hover | 在 <tbody 内的任一行启用鼠标悬停状态 |
| table-condensed | 让表格更加紧凑 |
<tr 、 <th 和 <td 类
| 类 | 描述 |
|---|---|
| active | 将悬停的颜色应用在行或者单元格上 |
| success | 表示成功的操作 |
| info | 表示信息变化的操作 |
| warning | 表示一个警告的操作 |
| danger | 表示一个危险的操作 |
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="danger">
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
<tr class="success">
<td>数据库</td>
<td>MySQL</td>
</tr>
<tr class="info">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
<tr class="warning">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
</tbody>
</table>
测试结果：
表单
表单布局
- 在form标签元素中添加role=“from”
- 把标签和控制件放在带有class=“from-group”的div中
水平表单
设置样式：class=“form-horizontal”
<form action="" role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-md-3">姓名</label>
<div class="col-md-5">
<input type="text" class="form-control" placeholder="姓名信息">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">密码</label>
<div class="col-md-5">
<input type="password" class="form-control" placeholder="密码信息">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">文本</label>
<div class="col-md-5">
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">选项</label>
<div class="col-md-5">
<select name="" id="" class="form-control">
<option value="">hhh</option>
<option value="">bbb</option>
</select>
</div>
</div>
</form>
测试结果：
内敛表单
设置样式：class=“form-inline”
就是把所有控件和标签都放在一行里
垂直/基本表单
不加class样式，基本表单就是垂直表单
表单控件
form-control 、 input-lg （较小） input-sm （较大）
输入框（text）/下拉选择框（select）
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="row">
<div class="col-md-3">
<select name="" id="" class="form-control">
<option value="">ll</option>
<option value="">jj</option>
<option value="">pp</option>
</select>
<select name="" id="" class="form-control" multiple>
<option value="">ll</option>
<option value="">jj</option>
<option value="">pp</option>
</select>
</div>
<br>
<div class="row">
<div class="col-md-3">
<textarea name="" id="" cols="30" rows="10" class="form-control">
</textarea>
</div>
</div>
</div>
</div>
测试结果：
复选框（Checkbox）/单选框（Radio）
- 当创建表单时，如果您想让用户从列表中选择若干个选项时，使用 checkbox。如果您限制用户只能选择一个选项，使用 radio
- 对一系列复选框和单选框使用 checkbox-inline 或 radio-inline类，控制它们显示在同一行上
<div class="row">
<div class="col-md-3">
<!-- 水平方向 -->
<label class="checkbox-inline">
<input type="checkbox" id="" value=""> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value=""> 选项 2
</label>
<label class="radio-inline">
<input type="radio" name="" id="" value="" checked> 选项 1
</label>
<label class="radio-inline">
<input type="radio" name="" id="" value=""> 选项 2
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- 垂直方向 -->
<div class="checkbox">
<label>
<input type="checkbox" id="" value=""> 选项 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="" value=""> 选项 2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" id="" value="" > 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" id="" value=""> 选项 2
</label>
</div>
</div>
</div>
测试结果：
按钮
图表取自：Bootstrap 按钮 | 菜鸟教程 (runoob.com)
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button><br>
<a href="" class="btn btn-primary">a标签</a>
<div class="btn btn-success">div标签</div><br>
<button type="button" class="btn btn-primary" onclick="alert('hello')">原始按钮</button>
<button type="button" class="btn-sm btn-primary" >原始按钮</button>
<button type="button" class="btn-xs btn-primary">原始按钮</button>
<button type="button" class="btn-lg btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary" disabled>原始按钮</button>
测试结果：
扫一扫
3602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
