Bootstrap 值得关注的知识点总结

1. 字体比例大小

h1 small {
  font-size: 65%;
}

font-size:65% 的意思是 h3 标签里面的 small 标签是外面一层字体的 65% 大小。比如：

<h1>Bootstrap标题一<small>我是副标题</small></h1>

Bootstrap 标题一我是副标题

显示效果便是如上，small 标签包含的文字外侧 h1 文字大小的 65% 2. 斜体的设置 CSS 方法：

**font-style**:**italic**

标签方法：

<em>我是斜体</em><i>我也是斜体</i>

3. 强调相关的类

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（##a94442）

4. 对齐相关的类

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

5. 列表无标号列表

<ul class = "list-unstyled">

无标号横向列表

<ul class="list-inline">

6. 代码段单行内联代码

<code>单行内联代码</code>

多行代码

<pre>多行代码</pre>

用户输入代码

<kbd>用户输入代码</kbd>

硬编码

左尖括号&lt; 右尖括号&gt;

滚动代码

class = "**.pre-scrollable**"

7. 表格

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

8. 常用表单样式纵向表单

<form role="form">
 <div class="form-group">
 <label for="exampleInputEmail1">邮箱：</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

水平表单

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
 <div class="col-sm-10">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </div>
 </div>
</form>

下拉条和文本域

<form role="form">
 <!--下拉条-->
 <div class="form-group">
 <select class="form-control"> 
 <option>1</option> 
 <option>2</option> 
 <option>3</option> 
 <option>4</option> 
 <option>5</option> 
 </select>
 </div>
 <div class="form-group">
 <!--文本域-->
 <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

单选框和复选框

<form role="form">
 <h3>案例1</h3>
 <div class="checkbox">
 <label>
 <input type="checkbox" value="">
 记住密码
 </label>
 </div>
 <div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
 喜欢
 </label>
 </div>
 <div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
 不喜欢
 </label>
 </div>
</form>

9. 一些比较好看的按钮

来源：https://cuiqingcai.com/328.html

Bootstrap 标题一我是副标题

猜你喜欢