移动web——bootstrap响应式工具

基本介绍

1、利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

基本使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .row div{

            border: 1px solid #000;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div class="container-fluid">

    <div class="row hidden-xs">

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

    </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

当屏幕小于768px就会隐藏列表

巴特西

移动web——bootstrap响应式工具

最新文章

热门文章