首页 > 代码库 > BootStrap栅格系统

BootStrap栅格系统

2024-09-08 07:52:37   253人阅读

 

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
    <style type="text/css" media="screen">
        div[class*="col-"]
        {
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <div class="row">
        <div class="col-md-1">col-1</div>
        <div class="col-md-1">col-2</div>
        <div class="col-md-1">col-3</div>
        <div class="col-md-1">col-4</div>
        <div class="col-md-1">col-5</div>
        <div class="col-md-1">col-6</div>
        <div class="col-md-1">col-7</div>
        <div class="col-md-1">col-8</div>
        <div class="col-md-1">col-9</div>
        <div class="col-md-1">col-10</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
    </div>
</div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
    <style type="text/css" media="screen">
        div[class*="col-"]
        {
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <div class="row">
        <div class="col-md-1">col-1</div>
        <div class="col-md-1">col-2</div>
        <div class="col-md-1">col-3</div>
        <div class="col-md-1">col-4</div>
        <div class="col-md-1">col-5</div>
        <div class="col-md-1">col-6</div>
        <div class="col-md-1">col-7</div>
        <div class="col-md-1">col-8</div>
        <div class="col-md-1">col-9</div>
        <div class="col-md-1">col-10</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
    </div>
     <div class="row">
        <div class="col-md-4">col-1</div>
        <div class="col-md-4">col-2</div>
        <div class="col-md-4">col-3</div>
    </div>
     <div class="row">
        <div class="col-md-3">col-1</div>
        <div class="col-md-3">col-2</div>
        <div class="col-md-3">col-3</div>
        <div class="col-md-3">col-4</div>
        <div class="col-md-3">col-5</div>
    </div>
    <div class="row">
        <div class="col-md-12">col-1</div>
        <div class="col-md-12">col-2</div>
    </div>
</div>
</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
    <style type="text/css" media="screen">
        div[class*="col-"]
        {
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <div class="row">
        <div class="col-md-1">col-1</div>
        <div class="col-md-1">col-2</div>
        <div class="col-md-1">col-3</div>
        <div class="col-md-1">col-4</div>
        <div class="col-md-1">col-5</div>
        <div class="col-md-1">col-6</div>
        <div class="col-md-1">col-7</div>
        <div class="col-md-1">col-8</div>
        <div class="col-md-1">col-9</div>
        <div class="col-md-1">col-10</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
    </div>
     <div class="row">
        <div class="col-md-4">col-1</div>
        <div class="col-md-4">col-2</div>
        <div class="col-md-4">col-3</div>
    </div>
     <div class="row">
        <div class="col-md-3">col-1</div>
        <div class="col-md-3">col-2</div>
        <div class="col-md-3">col-3</div>
        <div class="col-md-3">col-4</div>
        <div class="col-md-3">col-5</div>
    </div>
    <div class="row">
        <div class="col-md-12">col-1</div>
        <div class="col-md-12">col-2</div>
    </div>
     <div class="row">
        <div class="col-md-4">
            <img src="image/栅格系统1.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统1</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
        <div class="col-md-4">
            <img src="image/栅格系统2.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统2</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
        <div class="col-md-4">
            <img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统3</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
    </div>
    
</div>
</body>
</html>

技术分享

 

 技术分享

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
    <style type="text/css" media="screen">
        div[class*="col-"]
        {
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
    <div class="row">
        <div class="col-md-1">col-1</div>
        <div class="col-md-1">col-2</div>
        <div class="col-md-1">col-3</div>
        <div class="col-md-1">col-4</div>
        <div class="col-md-1">col-5</div>
        <div class="col-md-1">col-6</div>
        <div class="col-md-1">col-7</div>
        <div class="col-md-1">col-8</div>
        <div class="col-md-1">col-9</div>
        <div class="col-md-1">col-10</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
        <div class="col-md-1">col-11</div>
        <div class="col-md-1">col-12</div>
    </div>
     <div class="row">
        <div class="col-md-4">col-1</div>
        <div class="col-md-4">col-2</div>
        <div class="col-md-4">col-3</div>
    </div>
     <div class="row">
        <div class="col-md-3">col-1</div>
        <div class="col-md-3">col-2</div>
        <div class="col-md-3">col-3</div>
        <div class="col-md-3">col-4</div>
        <div class="col-md-3">col-5</div>
    </div>
    <div class="row">
        <div class="col-md-12">col-1</div>
        <div class="col-md-12">col-2</div>
    </div>
     <div class="row">
        <div class="col-md-4">
            <img src="image/栅格系统1.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统1</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
        <div class="col-md-4">
            <img src="image/栅格系统2.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统2</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
        <div class="col-md-4">
            <img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail">
            <h1 class="page-header">栅格系统3</h1>
            <p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
        </div>
    <!--屏幕缩小会变成一列-->
    <div class="row">
        <div class="col-md-4">col-1</div>
        <div class="col-md-4">col-2</div>
        <div class="col-md-4">col-3</div>
        <div class="col-md-4">col-4</div>
        <div class="col-md-4">col-5</div>
        <div class="col-md-4">col-6</div>
    </div>
    <!--屏幕缩小列数根据屏幕大小变----响应式栅格系统-->
    <div class="row">
        <div class="col-md-4 col-xs-6 col-sm-4">col-1</div>
        <div class="col-md-4 col-xs-6 col-sm-4">col-2</div>
        <div class="col-md-4 col-xs-6 col-sm-4">col-3</div>
        <div class="col-md-4 col-xs-6 col-sm-4">col-4</div>
        <div class="col-md-4 col-xs-6 col-sm-4">col-5</div>
        <div class="col-md-4 col-xs-6 col-sm-4">col-6</div>
    </div>
    </div>
</div>
</body>
</html>

 

BootStrap栅格系统


联系
我们