您的位置：首页 > 运维架构 > 网站架构

网站前端_Bootstrap排版/列表/表格/表单/按钮/图像2

2017-03-03 00:00 447 查看
# 表行样式

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
29
30
31
32
33
34
35
36
<
table
class
=
"table table-condensed"
>

<
thead
>

<
tr
>

<
th
>#</
th
>

<
th
>主机</
th
>

<
th
>状态</
th
>

</
tr
>

</
thead
>

<
tbody
>

<
tr
 
class
=
"active"
>

<
td
>1</
td
>

<
td
>1.1.1.1</
td
>

<
td
>active</
td
>

</
tr
>

<
tr
 
class
=
"success"
>

<
td
>2</
td
>

<
td
>2.2.2.2</
td
>

<
td
>success</
td
>

</
tr
>

<
tr
 
class
=
"info"
>

<
td
>3</
td
>

<
td
>3.3.3.3</
td
>

&n
4000
bsp;   
<
td
>info</
td
>

</
tr
>

<
tr
 
class
=
"warning"
>

<
td
>4</
td
>

<
td
>4.4.4.4</
td
>

<
td
>warning</
td
>

</
tr
>

<
tr
 
class
=
"danger"
>

<
td
>5</
td
>

<
td
>5.5.5.5</
td
>

<
td
>danger</
td
>

</
tr
>

</
tbody
>

</
table
>

说明: BootStrap为表格tr元素提供了5种额外样式,控制tr的背景颜色,active类表示当前活动的信息,success类表示成功或者正确的行为,warning类表示警告需要特别注意,.danger类表示危险或可能错过的原因,需要注意的是当要和table-hover类一起使用的时候,也设置了响应的鼠标悬停高亮颜色,所以自定义覆盖时需要注意.

# 响应表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<
div
 
class
=
"table-responsive"
>

<
table
 
class
=
"table table-bordered"
>

<
thead
>

<
tr
>

<
th
>选中</
th
>

<
th
>#</
th
>

<
th
>主机</
th
>

<
th
>状态</
th
>

</
tr
>

</
thead
>

<
tbody
>

<
tr
 
class
=
"active"
>

<
td
><
input
 
type
=
"checkbox"
 
name
=
"row"
></
td
>

<
td
>1</
td
>

<
td
>1.1.1.1</
td
>

<
td
>active</
td
>

</
tr
>

</
tbody
>

</
table
>

</
div
>

说明: BootStrap通过在t表格外部套一层table-responsive类容器即可创建响应式表格,在小于768px时容器会自动出现水平滚动条,大于768px时水平滚动条消失,还有一点儿是对外部容器添加了一个边框的同时去掉了内部table的table-bordered边框,防止重叠

# 基础表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<
div
 
class
=
"container"
>

<
form
 
action
=
""
>

<
fieldset
>

<
legend
>用户登录</
legend
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"user"
>账户</
label
>

<
input
 
type
=
"email"
 
id
=
"user"
 
name
=
"user"
 
class
=
"form-control"
 
placeholder
=
"email"
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"pass"
>密码</
label
>

<
input
 
type
=
"password"
 
id
=
"pass"
 
name
=
"pass"
 
class
=
"form-control"
 
placeholder
=
"pass"
>

</
div
>

<
div
 
class
=
"form-group"
>

<
input
 
type
=
"checkbox"
 
id
=
"is_remember"
 
name
=
"is_remember"
> 记住密码

</
div
>

<
div
 
class
=
"form-group"
>

<
button
 
type
=
"submit"
 
class
=
"btn btn-default"
>登陆</
button
>

</
div
>

</
fieldset
>

</
form
>

</
div
>

说明: BootStrap对基础表单并没做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset/legend/label标签进行了设定,select/input/textarea元素上应用form-control样式显示的宽度会变为100%,并且placeholder的颜色会变为#999999;通常实际使用中会将label和input元素放在一个样式为form-group的div里,form-group默认设置margin-bottom: 15px来保证清晰的看到每一组控件.

# 内联表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<
div
 
class
=
"container"
>

<
form
 
action
=
""
 
class
=
"form-inline"
>

<
fieldset
>

<
legend
>用户登录</
legend
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"user"
>账户</
label
>

<
input
 
type
=
"email"
 
id
=
"user"
 
name
=
"user"
 
class
=
"form-control"
 
placeholder
=
"email"
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"pass"
>密码</
label
>

<
input
 
type
=
"password"
 
id
=
"pass"
 
name
=
"pass"
 
class
=
"form-control"
 
placeholder
=
"pass"
>

</
div
>

<
div
 
class
=
"checkbox"
>

<
label
><
input
 
type
=
"checkbox"
 
id
=
"is_remember"
 
name
=
"is_remember"
> 记住密码</
label
>

</
div
>

<
div
 
class
=
"form-group"
>

<
button
 
type
=
"submit"
 
class
=
"btn btn-default"
>登陆</
button
>

</
div
>

</
fieldset
>

</
form
>

</
div
>

说明: BootStrap的form-inline类使得所有表单都在一行,其实是设置了所有的form-group的display: inline-block;当然如果你想隐藏label标签的话可直接给label加一个sr-only将其隐藏

# 横向表单

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
29
30
<
div
 
class
=
"container"
>

<
form
 
action
=
""
 
class
=
"form-horizontal"
 
role
=
"form"
>

<
fieldset
>

<
legend
>用户登录</
legend
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"user"
 
class
=
"col-sm-1 control-label"
>账户</
label
>

<
div
 
class
=
"col-sm-11"
>

<
input
 
type
=
"email"
 
id
=
"user"
 
name
=
"user"
 
class
=
"form-control"
 
placeholder
=
"email"
>

</
div
>


</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"pass"
 
class
=
"col-sm-1 control-label"
>密码</
label
>

<
div
 
class
=
"col-sm-11"
>

<
input
 
type
=
"password"
 
id
=
"pass"
 
name
=
"pass"
 
class
=
"form-control"
 
placeholder
=
"pass"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
div
 
class
=
"col-sm-offset-1 col-sm-11"
>

<
label
><
input
 
type
=
"checkbox"
 
id
=
"is_remember"
 
name
=
"is_remember"
> 记住密码</
label
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
div
 
class
=
"col-sm-offset-1 col-sm-11"
>

<
button
 
type
=
"submit"
 
class
=
"btn btn-default"
>登陆</
button
>

</
div
>

</
div
>

</
fieldset
>

</
form
>

</
div
>

说明: BootStrap横向表单和内联表单使用方式不太一样,使用form的form-horizontal类不止是简单的设置control-label等的padding-top:7px;text-align:right;保证标签相对于输入框垂直居中,如果使用text-right则会靠顶部,还需要配合预置删栏系统以便将label和控件水平并排布局

# 表单控件

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<
div
 
class
=
"container"
>

<
section
 
id
=
"login"
>

<
form
 
action
=
""
 
class
=
"form-horizontal"
>

<
fieldset
>

<
legend
>注册邮箱帐号</
legend
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"email"
 
class
=
"col-sm-2 control-label"
>邮箱帐号</
label
>

<
div
 
class
=
"col-sm-10"
>

<
input
 
type
=
"email"
 
class
=
"form-control"
 
id
=
"email"
 
name
=
"email"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"name"
 
class
=
"col-sm-2 control-label"
>昵称</
label
>

<
div
 
class
=
"col-sm-10"
>

<
input
 
type
=
"text"
 
class
=
"form-control"
 
id
=
"name"
 
name
=
"name"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"password"
 
class
=
"col-sm-2 control-label"
>密码</
label
>

<
div
 
class
=
"col-sm-10"
>

<
input
 
type
=
"password"
 
class
=
"form-control"
 
id
=
"password"
 
name
=
"password"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"confirm_password"
 
class
=
"col-sm-2 control-label"
>确认密码</
label
>

<
d
4000
iv
 
class
=
"col-sm-10"
>

<
input
 
type
=
"password"
 
class
=
"form-control"
 
id
=
"confirm_password"
 
name
=
"confirm_password"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"sex"
 
class
=
"col-sm-2 control-label"
>性别</
label
>

<
div
 
class
=
"col-sm-10"
>

<
label
 
class
=
"radio-inline"
>

<
input
 
type
=
"radio"
 
name
=
"sex"
 
id
=
"sex"
 
checked
=
"checked"
>男

</
label
>

<
label
 
class
=
"radio-inline"
>

<
input
 
type
=
"radio"
 
name
=
"sex"
 
id
=
"sex"
>女

</
label
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"hobby"
 
class
=
"col-sm-2 control-label"
>爱好</
label
>

<
div
 
class
=
"col-sm-10"
>

<
label
 
class
=
"checkbox-inline"
>

<
input
 
type
=
"checkbox"
 
name
=
"hobby"
> 写代码

</
label
>

<
label
 
class
=
"checkbox-inline"
>

<
input
 
type
=
"checkbox"
 
name
=
"hobby"
> 看电影

</
label
>

<
label
 
class
=
"checkbox-inline"
>

<
input
 
type
=
"checkbox"
 
name
=
"hobby"
> 看妹纸

</
label
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
class
=
"col-sm-2 control-label"
>梦想</
label
>

<
div
 
class
=
"col-sm-2"
>

<
div
 
class
=
"checkbox"
>

<
label
><
input
 
type
=
"checkbox"
>全栈开发</
label
>

</
div
>

<
div
 
class
=
"checkbox"
>

<
label
><
input
 
type
=
"checkbox"
>桌球达人</
label
>

</
div
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
class
=
"col-sm-2 control-label"
>生日</
label
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"rl"
 
id
=
"rl"
 
class
=
"form-control"
>

<
option
 
value
=
"公历"
>公历</
option
>

</
select
>

</
div
>

<
div
 
class
=
"col-sm-2"
>

<
select
 
name
=
"nf"
 
id
=
"nf"
 
class
=
"form-control"
>

<
option
 
value
=
"2000年"
>2000年</
option
>

</
select
>

</
div
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"yf"
 
id
=
"yf"
 
class
=
"form-control"
>

<
option
 
value
=
"1月"
>1月</
option
>

</
select
>

</
div
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"ts"
 
id
=
"ys"
 
class
=
"form-control"
>

<option
 
value
=
"1日"
>1日</
option
>

</
select
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
class
=
"col-sm-2 control-label"
>所在地</
label
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"gj"
 
id
=
"gj"
 
class
=
"form-control"
>

<
option
 
value
=
"中国"
>中国</
option
>

</
select
>

</
div
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"sf"
 
id
=
"sf"
 
class
=
"form-control"
>

<
option
 
value
=
"浙江"
>浙江</
option
>

</
select
>

</
div
>

<
div
 
class
=
"col-sm-1"
>

<
select
 
name
=
"qy"
 
id
=
"qf"
 
class
=
"form-control"
>

<
option
 
value
=
"杭州"
>杭州</
option
>

</
select
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
for
=
"desc"
 
class
=
"col-sm-2 control-label"
>个人简介</
label
>

<
div
 
class
=
"col-sm-10"
>

<
textarea
 
name
=
"desc"
 
id
=
"desc"
 
rows
=
"5"
 
class
=
"form-control"
 
></
textarea
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
label
 
class
=
"col-sm-2 control-label"
>验证码</
label
>

<
div
 
class
=
"col-sm-10"
>

<
input
 
type
=
"image"
 
src
=
"img/auth.png"
 
name
=
"auth"
 
id
=
"auth"
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
div
 
class
=
"col-sm-offset-2 col-sm-10"
>

<
button
 
class
=
"btn btn-default"
>完成注册</
button
>

</
div
>

</
div
>

<
div
 
class
=
"form-group"
>

<
div
 
class
=
"col-sm-offset-2 col-sm-10"
>

<
label
 
for
=
"agreen"
 
class
=
"checkbox-inline"
>

<
input
 
type
=
"checkbox"
 
name
=
"agree"
 
id
=
"agree"
 
checked
=
"checked"
>

我已阅读并同意相关服务条款和隐私政策

<
span
 
class
=
"glyphicon glyphicon-chevron-down"
 
style
=
"font-size: 10px;"
></
span
>

</
label
>

</
div
>

</
div
>

</
fieldset
>

</
form
>

</
section
>

</
div
>

说明: BootStrap的form-horizontal类和删栏系统配合实现了横向表单,input/select/textarea用法基本不变,当对它们附加form-control类时,宽度将变为100%,所以此时就无需设置textarea的cols值,radio/checkbox比较特殊,支持通过外部附加一个拥有radio/checkbox类的div实现竖向单选/多选,也可通过对它们label附加radio-inline/checkbox-inline实现横向单选/多选.

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航