bootstrap笔记（二）——列表样式和表格样式
<div class="container" style="border: red solid 1px">
<!--无序列表-->
<h2>中国四大名著</h2>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<ul class="list-unstyled">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
</div>
<h2>内联元素</h2>
<ul class="list-inline">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--支持移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container" style="border: red solid 1px">
<!-- table>tr*5>td*4 -->
<table class="table">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>价格</td>
<td>状态</td>
</tr>
<tr>
<td>1001</td>
<td>小米手机</td>
<td>1999.00</td>
<td>已发货</td>
</tr>
<tr>
<td>1002</td>
<td>苹果手机</td>
<td>5888.00</td>
<td>已签收</td>
</tr>
<tr>
<td>1003</td>
<td>三星手机</td>
<td>3888.00</td>
<td>已退货</td>
</tr>
<tr>
<td>1004</td>
<td>华为手机</td>
<td>2888.00</td>
<td>待出库</td>
</tr>
</table>
</div>
</body>
</html>
<table class="table table-bordered">
table-striped配合 “:nth-child”选择器使用，来改变默认的颜色效果，也称之为隔行变色或斑马线，起到两种不同颜色变化的效果，条纹状态的表格
<style type="text/css">
table.table-striped tr:nth-child(odd){
background: deepskyblue;
}
table.table-striped tr:nth-child(even){
background: red;
}
</style> <table class="table table-bordered table-striped">
table-hover也常和:hover使用来改变鼠标放在表格的默认效果
table.table-hover tr:hover{
background: #2aabd2;
}<table class="table table-bordered table-hover">
table-condensed:紧凑型，把表格的padding值减半
<table class="table table-bordered table-hover table-condensed">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--支持移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<style type="text/css">
/* table.table-striped tr:nth-child(odd){
background: deepskyblue;
}
table.table-striped tr:nth-child(even){
background: red;
}*/
table.table-hover tr:hover{
background: #2aabd2;
}
</style>
</head>
<body>
<div class="container" style="border: red solid 1px">
<!-- table>tr*5>td*4 -->
<!-- <table class="table table-bordered table-striped">-->
<table class="table table-bordered table-hover table-condensed">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>价格</td>
<td>状态</td>
</tr>
<tr>
<td class="info">1001</td>
<td class="active">小米手机</td>
<td>1999.00</td>
<td>已发货</td>
</tr>
<tr class="success">
<td>1002</td>
<td>苹果手机</td>
<td>5888.00</td>
<td>已签收</td>
</tr>
<tr class="danger">
<td>1003</td>
<td>三星手机</td>
<td>3888.00</td>
<td>已退货</td>
</tr>
<tr class="warning">
<td>1004</td>
<td>华为手机</td>
<td>2888.00</td>
<td>待出库</td>
</tr>
</table>
</div>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/11/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
