首页 > 其他分享 >Bootstrap 排版和表格

Bootstrap 排版和表格

时间:2023-03-17 19:56:34浏览次数:30  
标签:副标题 表格 标签 本行 Bootstrap 标题 内容 排版 class

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
        <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
        <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
        <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
        <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
        <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
        <p class = "lead">我的第六个标签&nbsp&nbsp&nbsph6</p>
        <small>本行内容是在标签内</small><br>
        <strong>本行内容是在标签内</strong><br>
        <em>本行内容是在标签内,并呈现为斜体</em><br>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>
        <br/><br/><br/>

        <table class = "table">
            <caption>基本的表格布局</caption>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                </tr>
            </tbody>
    </body>
</html>

Bootstrap 基本代码网址

https://www.runoob.com/bootstrap/bootstrap-tables.html

标签:副标题,表格,标签,本行,Bootstrap,标题,内容,排版,class
From: https://www.cnblogs.com/wangyihang-xh/p/17227976.html

相关文章