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

最新推荐文章于 2022-07-05 15:16:16 发布

weixin_34337265

最新推荐文章于 2022-07-05 15:16:16 发布

阅读量141

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/learnbo/blog/850510

版权

2019独角兽企业重金招聘Python工程师标准>>>

# 表行样式

<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>

<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类一起使用的时候,也设置了响应的鼠标悬停高亮颜色,所以自定义覆盖时需要注意.

# 响应表格

<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边框,防止重叠

# 基础表单

<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来保证清晰的看到每一组控件.

# 内联表单

<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将其隐藏

# 横向表单

<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 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 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 class="form-group">

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

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

</div>

</fieldset>

</form>

</div>

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

# 表单控件

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 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 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 class="form-group">

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

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

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

</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 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 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 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 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 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 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 class="form-group">

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

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

</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>

</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/

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