标签：Bootstrap 精选 网站 bootstrap 栅格 优站 -- repeat
官网：https://v3.bootcss.com/css/#grid
看一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>栅格实例</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
div[class|=jumbotron]{
background-image: url("img/background.png");
/*如何重复背景图像，no-repeat 背景图像将仅显示一 次，repeat 默认将在垂直方向和水平方向重复，repeat-x，repeat-y.*/
background-repeat: no-repeat;
/*设置图片充满整个div*/
background-size: 100% 100%;
border-radius: 35px;
}
div[class|=caption]{
text-align: center;
}
small{
display: block;
color: dodgerblue;
}
h4{
display: block;
color: dodgerblue;
}
img{
width: 250px;
height: 130px;
}
</style>
</head>
<!--
col-lg-3 col-md-4 col-sm-6
lg：表示在大屏pc端
md：表示在小平pc端
sm：表示在ipad
xs：表示在移动端，这个可以不用写
因为bootstrap默认一行分为12块
col-lg-3 表示这一列占3块
需求：
需要它前边的先掉下去
解决方案：使用列排序
col-lg-pull-9向右偏移9
col-lg-push-9向左偏移9
-->
<body>
<div class="container">
<!--巨幕-->
<div class="jumbotron">
<h1 style="color: red">Hello, BootStrap!</h1>
</div>
<!--缩略图-->
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
<!-- <div class="col-lg-3 col-md-4 col-sm-6 ">-->
<div class="thumbnail" style="height: 336px">
<img src="img/bootstrap.png" alt="...">
<div class="caption">
<h4>优站精选</h4>
<small class="text-input-context-menu">Bootstrap 网站实例</small>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">
<!-- <div class="col-lg-3 col-md-4 col-sm-6">-->
<div class="thumbnail" style="height: 336px">
<img src="img/react.png" alt="...">
<div class="caption">
<h4>优站精选</h4>
<small class="text-input-context-menu">Bootstrap 网站实例</small>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
<!-- <div class="col-lg-3 col-md-4 col-sm-6">-->
<div class="thumbnail" style="height: 336px">
<img src="img/webpack.png" alt="...">
<div class="caption">
<h4>优站精选</h4>
<small class="text-input-context-menu">Bootstrap 网站实例</small>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
<!--<div class="col-lg-3 col-md-4 col-sm-6">-->
<div class="thumbnail" style="height: 336px">
<img src="img/typeScript.png" alt="...">
<div class="caption">
<h4>优站精选</h4>
<small class="text-input-context-menu">Bootstrap 网站实例</small>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
结果如下：
在大屏下
在中屏下
在平板下
在移动端：手机
标签：Bootstrap,精选,网站,bootstrap,栅格,优站,--,repeat 来源： https://blog.csdn.net/fgets__/article/details/121887182
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。