Bootstrap -- 表格样式、表单布局
1. 表格的一些样式
举例:
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>My Test bootstraptitle>
link rel="stylesheet" href="./css/bootstrap.min.css">
script type="text/javascript" src="./js/bootstrap.min.js">script>
head>
body>
table class="table table-striped">
caption>这是一个测试表格caption>
thead>
tr>
th>姓名th>
th>年龄th>
th>地区th>
tr>
thead>
tbody>
tr>
td>小胡子td>
td>26td>
td>陕西td>
tr>
tr>
td>大胡子td>
td>26td>
td>北京td>
tr>
tbody>
table>
body>
html>
View Code页面效果:
2. 表格行或单元格的样式
举例:
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>My Test bootstraptitle>
link rel="stylesheet" href="./css/bootstrap.min.css">
script type="text/javascript" src="./js/bootstrap.min.js">script>
head>
body>
table class="table table-striped">
caption>这是一个测试表格caption>
thead>
tr>
th>姓名th>
th>年龄th>
th>地区th>
tr>
thead>
tbody>
tr class="info">
td>小胡子td>
td>26td>
td>陕西td>
tr>
tr class="warning">
td>大胡子td>
td>26td>
td>北京td>
tr>
tbody>
table>
body>
html>
View Code页面效果:
3. 表单布局
(1)垂直表单:
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>My Test bootstraptitle>
link rel="stylesheet" href="./css/bootstrap.min.css">
script type="text/javascript" src="./js/bootstrap.min.js">script>
head>
body>
form role="form">
div class="form-group">
label for="name">姓名label>
input type="text" class="form-control" id="name" placeholder="请输入姓名">
div>
div class="form-group">
label for="inputfile">选择文件label>
input type="file" id="inputfile">
div>
button type="submit" class="btn btn-default">提交button>
form>
body>
html>
View Code效果:
(2)内联表单:它的所有元素是内联的,向左对齐的,标签是并排的
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>My Test bootstraptitle>
link rel="stylesheet" href="./css/bootstrap.min.css">
script type="text/javascript" src="./js/bootstrap.min.js">script>
head>
body>
form role="form" class="form-inline">
div class="form-group">
label for="name">姓名label>
input type="text" class="form-control" id="name" placeholder="请输入姓名">
div>
div class="form-group">
label for="inputfile">选择文件label>
input type="file" id="inputfile">
div>
button type="submit" class="btn btn-default">提交button>
form>
body>
html>
View Code效果:
(3)水平表单:水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>My Test bootstraptitle>
link rel="stylesheet" href="./css/bootstrap.min.css">
script type="text/javascript" src="./js/bootstrap.min.js">script>
head>
body>
form role="form" class="form-horizontal">
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" placeholder="请输入姓名">
div>
div>
div class="form-group">
label for="inputfile" class="col-sm-2 control-label">选择文件label>
div class="col-sm-10">
input type="file" id="inputfile">
div>
div>
div class="form-group">
div class="col-sm-12">
button type="submit" class="btn btn-default">提交button>
div>
div>
form>
body>
html>
View Code效果:
参与评论
手机查看
返回顶部