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
|
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. 一些比较好看的按钮 
文章来源: cuiqingcai.com,作者:崔庆才,版权归原作者所有,如需转载,请联系作者。
原文链接:cuiqingcai.com/328.html
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
评论(0)