BootStrap入门响应式栅栏

来源：互联网发布：java中的泛型怎么用编辑：程序博客网时间：2024/05/22 07:01

介绍：
1. 注意:
bootstrap将每一行分成12份
媒体查询:

假如大屏幕,每行显示6个    超大电脑,屏幕分辨率>1200     使用: col-lg-2假如屏幕小点,每行显示4个    992<屏幕分辨率<1200          使用: col-md-3再小点,每行显示2个    768<屏幕分辨率<992           使用: col-sm-6继续小,每行显示1个      屏幕分辨率<768               使用:col-xs-12

2. 代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <!--增加移动端的条件 viewport-->        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>哈哈</title>        <!--导入bootstrap的css-->        <link rel="stylesheet" href="css/bootstrap.min.css" />        <!--导入jquery.js-->        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>        <!--导入bootstrap.js-->        <script type="text/javascript" src="js/bootstrap.min.js"></script>    </head>    <body>        <div class="container-fluid">            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>        </div>    </body></html>

3. bootstrap将每一行分成12份，然后更具屏幕的大小进行分割。

4. 效果图，
col-sm-4的效果图，这样分析，一共12份，sm是一个占4份，则会显示3个

col-xs-6的效果图，一共12份，xm是一个占6份，则会显示2个

阅读全文

0 0