1。表格的一些样式
举例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>我的测试bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;表类=氨聿鹂?一张表”在
& lt; caption>这是一个测试表格& lt;/caption>
& lt; thead>
& lt; tr>
& lt; th>姓名& lt;/th>
& lt; th>年龄& lt;/th>
& lt; th>地区& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td>小胡子& lt;/td>
& lt; td> 26 & lt;/td>
& lt; td>陕西& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>大胡子& lt;/td>
& lt; td> 26 & lt;/td>
& lt; td>北京& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/body>
& lt;/html>
页面效果:
2。表格行或单元格的样式
举例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>我的测试bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;表类=氨聿鹂?一张表”在
& lt; caption>这是一个测试表格& lt;/caption>
& lt; thead>
& lt; tr>
& lt; th>姓名& lt;/th>
& lt; th>年龄& lt;/th>
& lt; th>地区& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr类="信息"比;
& lt; td>小胡子& lt;/td>
& lt; td> 26 & lt;/td>
& lt; td>陕西& lt;/td>
& lt;/tr>
& lt; tr类="警告"比;
& lt; td>大胡子& lt;/td>
& lt; td> 26 & lt;/td>
& lt; td>北京& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/body>
& lt;/html>
页面效果:
3。表单布局
(1)垂直表单:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>我的测试bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;形式的作用=靶问健痹?
祝辞& lt; div class="形式的班级”;
& lt;标签="名称"祝辞姓名& lt;/label>
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d=皀ame”占位符=扒胧淙胄彰痹?
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签=" inputfile "祝辞选择文件& lt;/label>
& lt;输入类型="文件" id=癷nputfile”比;
& lt;/div>
& lt;按钮类型=疤峤弧眂lass=癰tn btn-default祝辞提交& lt;/button>
& lt;/form>
& lt;/body>
& lt;/html>
效果:
(2)内联表单:它的所有元素是内联的,向左对齐的,标签是并排的
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>我的测试bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;形式的作用=靶问健眂lass=癴orm-inline”比;
祝辞& lt; div class="形式的班级”;
& lt;标签="名称"祝辞姓名& lt;/label>
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d=皀ame”占位符=扒胧淙胄彰痹?
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签=" inputfile "祝辞选择文件& lt;/label>
& lt;输入类型="文件" id=癷nputfile”比;
& lt;/div>
& lt;按钮类型=疤峤弧眂lass=癰tn btn-default祝辞提交& lt;/button>
& lt;/form>
& lt;/body>
& lt;/html>
