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>

在这里插入图片描述

posted @ 2019-11-14 01:55  兮动人  阅读(72)  评论(0)  编辑  收藏  举报