BootStrap布局容器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
</head>
<body>
<div class="container-fluid" style="background: grey";>
    <!--会自动在文字底部加横线-->
    <h1 class="page-header">BootStrap</h1>
    <h1 class="page-header">布局容器</h1>
</div>
</body>
</html>

<p>定义文字大小是14，底部10px的间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <!--会自动在文字底部加横线-->
    <h1 class="page-header">布局<big>容器</big></h1>
    <h1 class="page-header">布局<small>容器</small></h1>
    <p>又是一年两会时，全国各地的人大代表纷纷来到北京，带着他们的议案和老百姓的希望和诉求到“两会”上。其中有这样三位特殊的代表：他们与考察或下团组的***有过一面之缘，***的一个承诺、一句叮咛让他们印象深刻。***的话也影响了几位代表在基层的履职。</p>
</div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <!--会自动在文字底部加横线-->
    <h1 class="page-header text-right">布局<big>容器</big></h1>
    <h1 class="page-header text-center">布局<small>容器</small></h1>
    <p>又是一年两会时，全国各地的人大代表纷纷来到北京，带着他们的议案和老百姓的希望和诉求到“两会”上。其中有这样三位特殊的代表：他们与考察或下团组的***有过一面之缘，***的一个承诺、一句叮咛让他们印象深刻。***的话也影响了几位代表在基层的履职。</p>
    <!--英文字母全大写-->
    <p class="text-uppercase">Wisdom outweighs any wealth.</p>
    <!--英文字母全小写-->
    <p class="text-lowercase">Wisdom outweighs any wealth.</p>
    <!--首字母大写-->
    <p class="text-capitalize">Wisdom outweighs any wealth.</p>
</div>
</body>
</html>

 

 

<h1 class=“page-header”>列表</h1>
    <ul class="list-unstyled list-inline">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

 

 

 

 

 缩小padding值

 

 

<h1 class="page-header">表格</h1>
    <table class="table">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>籍贯</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>南京</td>
        </tr>
        <tr>
            <td>4</td>
            <td>田六</td>
            <td>湖南</td>
        </tr>
    </table>

 

<table class="table table-bordered">
...
      
</table>

 

<table class="table table-bordered table-hover">
...

</table>

 

<table class="table table-bordered table-hover table-striped">
...
</table>

 

<table class="table table-bordered table-hover table-striped table-condensed">
...
</table>

 

 响应式表格

 

<div class="table-responsive">
    <table class="table table-bordered table-hover table-striped table-condensed">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>籍贯</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>南京</td>
        </tr>
        <tr>
            <td>4</td>
            <td>田六</td>
            <td>湖南</td>
        </tr>
    </table>
    </div>

 

<tr class="active">
            <td>编号</td>
            <td>姓名</td>
            <td>籍贯</td>
        </tr>
        <tr class="success">
            <td>1</td>
            <td>张三</td>
            <td>上海</td>
        </tr>
        <tr class="info">
            <td>2</td>
            <td>李四</td>
            <td>北京</td>
        </tr>
        <tr class="danger">
            <td>3</td>
            <td>王五</td>
            <td>南京</td>
        </tr>
        <tr class="warning">
            <td>4</td>
            <td>田六</td>
            <td>湖南</td>
        </tr>

 

 

posted on 2017-03-11 16:25  心如止水微笑人生  阅读(746)  评论(0)    收藏  举报

导航