Bootstrap 排版和表格

复制代码
<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

posted @   王一行(小号)  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
· 条纹表格布局
· HTML Bootstrap
· bootstrap布局
· HTML--基本的表格布局
· HTML--表格1
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示