Bootstrap 学习

一、安装

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrapt</title>

    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">
</head>
<body>
    <!-- 常规写法 -->
    <input type="button"  value="按钮测试">

    <br>
    <br>

    <input type="button" value="按键测试" class="btn btn-dafault">

</body>
</html>

 

 

二、Bootstrapt的基本用法

Bootstrap 的样式在线展示 ：     https://www.runoob.com/try/try.php?filename=trybs_default1
Bootstrap3 官方文档 ：  https://v3.bootcss.com/css/#type

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap的基本用法</title>


    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">

</head>
<body>

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<!-- <hr> -->
<br>
<br><br><br>



<table class="table table-striped  table-bordere ">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>

    <tr>
        <th>1</th>
        <th>张三</th>
        <th>21</th>
        <th>河北保定</th>
    </tr>

    <tr>
        <th>2</th>
        <th>王龙</th>
        <th>54</th>
        <th>大兴</th>
    </tr>

    <tr>
        <th>3</th>
        <th>王小波</th>
        <th>34</th>
        <th>北京</th>
    </tr>

    <tr>
        <th>3</th>
        <th>王波</th>
        <th>34</th>
        <th>北京</th>
    </tr>

</table>

</body>
</html>

 

posted @ 2020-11-07 21:22  链宁区块链安全服务  阅读(136)  评论(0)    收藏  举报