Bootstrap 值得关注的知识点总结

举报
崔庆才丨静觅 发表于 2021/05/21 23:53:08 2021/05/21
【摘要】 1. 字体比例大小 123 h1 small { font-size: 65%;} font-size:65% 的意思是 h3 标签里面的 small 标签是外面一层字体的 65% 大小。 比如: 1 <h1>Bootstrap标题一<small>我是副标题</small></h1> Bootstrap 标题一我是副标题 显示效果便...

1. 字体比例大小

1
2
3
h1 small {
  font-size: 65%;
}

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

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

Bootstrap 标题一我是副标题

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

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

标签方法:

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

3. 强调相关的类

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

4. 对齐相关的类

1
2
3
4
5
6
7
8
9
10
11
12
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

5. 列表 无标号列表

1
<ul class = "list-unstyled">

无标号横向列表

1
<ul class="list-inline">

6. 代码段 单行内联代码

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

多行代码

1
<pre>多行代码</pre>

用户输入代码

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

硬编码

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

滚动代码

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

7. 表格

1
2
3
4
5
6
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

水平表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

下拉条和文本域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

单选框和复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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. 一些比较好看的按钮 QQ截图20141104191608

文章来源: cuiqingcai.com,作者:崔庆才,版权归原作者所有,如需转载,请联系作者。

原文链接:cuiqingcai.com/328.html

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。