Bootstrap-移动设备和桌面屏幕

你是不是不希望小屏幕设备上所有列都堆叠在一起?那就使用Bootstrap针对超小屏幕和中等哦屏幕设备而定义的class吧!

类:.con-xs*同.con-md-*(超小屏幕和中等屏幕)

(画图仅供参考,并非标准切割图)

我们知道:

小屏幕即:.col-xs-*

中等屏幕即:.col-md-*

那么通过上图,我们就可以知道:每一行共12列,第一行一个容器占8列,一个占4列

第二行:三个容器同占4列

第三行:两个容器同占6列

<div class="row">
      <div class="col-xs-12 col-md-8">con-xs-12 con-md-8</div>
      <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>

.col-xs-12:即小屏幕占12行

.col-md-8:即中等屏幕占8行

那要实现上图中的效果,我们可以这样写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>桌面和移动设备屏幕</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
</head>
<body>
  <p style="text-align: center;font-size: 30px">栏格布局-移动设备和桌面屏幕</p>
   <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">con-xs-12 con-md-8</div>
            <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-4">col-xs-6 con-md-4"</div>
            <div class="col-xs-6 col-md-4">col-xs-6 con-md-4"</div>
            <div class="col-xs-6 col-md-4">col-xs-6 con-md-4"</div>
        </div>
        <div class="row">
            <div class="col-xs-6">col-xs-6</div>
            <div class="col-xs-6">col-xs-6</div>
        </div>
   </div>
    
</body>
</html>

最终,您会看到:

中等屏幕预览效果!

再看小屏幕,我们缩放浏览器窗口大小来模拟小屏幕,我们发现:con-xs-12 con-md-8和col-xs-6 col-md-4等原来是一列的,在小屏幕自动换行了!

posted @ 2019-09-04 15:21  阿沅lmo  阅读(67)  评论(0编辑  收藏  举报