Bootstrap学习笔记+代码

最新推荐文章于 2024-01-20 21:48:45 发布

jason-03

最新推荐文章于 2024-01-20 21:48:45 发布

阅读量105

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_42811988/article/details/100541479

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

其他文件在github上
github链接在这
个人觉得菜鸟教程还是不错的学习链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="assets/plugins/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"/>
    <link href="assets/plugins/bootstrap/css/bootstrap-theme.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .my_div{
            border: red;
        }

        .my_div1{
            border: 1px solid red !important;   /*css就近原则会失效*/
        }
        @meida screen and (max-width: 480px)    /*在实现页面放大缩小时间，可以改变页面边框的颜色*/
        {
            .my_div{
                border: 1px solid yellow;
            }
        }
    </style>
</head>
<body>


<h1>hello Bootstrap</h1>

<div class="row">
    <div class="col-md-4 col-xs-4" style="border: 1px solid red;">左</div>
    <div class="col-md-4 col-xs-4" style="border: 1px solid red;">右</div>
</div>

<div class="row">
    <div class="col-md-6 " style="border: 1px solid yellow;">左</div>
    <div class="col-md-6 " style="border: 1px solid yellow;">右</div>
</div>


<div class="my_div">
    Hello 媒体查询
</div>


<br />
<br />
<br />


<div class="my_div1" style="border:1px solid black;">
    hhhhhhhhhhh
</div>



<!--如果IE浏览器的版本低于9，调用这两个  ".js"-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->


<table class="table table-hover">    <!--实现悬停-->
    <thead>
    <tr>
        <th>
            说明
        </th>
        <th>
            备注
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>
            111111
        </th>
        <th>
            222222
        </th>
    </tr>
    <tr>
        <th>
            111111
        </th>
        <th>
            222222
        </th>
    </tr>
    </tbody>
</table>

<!--字体图标-->
<!--字体图标库-->
<!--FontAwesome:http://fontawesome.dashgame.com/-->
<!--LineAwesome:https://icons8.com/line-awesome-->
<!--Sociallcons:http://www.socicon.com/chart.php-->
<!--阿里巴巴矢量图标库：http://www.iconfont.cn/-->
<span class="glyphicon glyphicon-search"style="font-size: 100px; color: black;"></span>
</body>
</html>

具体的页面效果自己可以无限开发。自己随便玩