bootstarp网格布局简单实例

最新推荐文章于 2022-05-24 23:19:38 发布
最新推荐文章于 2022-05-24 23:19:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ranmudaofa/article/details/46464105
版权

1. 效果图如下：


2. 代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if lt IE 9]><script src="../root/dist/js/ie8-responsive-file-warning.js"></script><![endif]-->


<link href="../root/dist/css/bootstrap.css" rel="stylesheet" type="text/css">




<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .col-md-4, .col-md-3{
            padding-right: 0;
        }
        .col-md-8, .col-md-9{
            padding-left: 0;
        }
    </style>
</head>


<body>
<div class="container-fluid">
  <div class="row">
      <div class="col-md-4">
          <div class="row">
              <div class="col-md-4">
                  <h4 class="pull-right">游戏属性：</h4>
              </div>
              <div class="col-md-8">
                  <select class="form-control pull-left">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select>
              </div>
          </div>
      </div>
      <div class="col-md-4">
          <div class="row">
              <div class="col-md-3">
                  <h4 class="pull-right">区域：</h4>
              </div>
              <div class="col-md-6">
                  <select class="form-control pull-left">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select>
              </div>
          </div>
      </div>
      <div class="col-md-3">
          <div class="row">
              <div class="col-md-3">
                  <h4 class="pull-right">种族：</h4>
              </div>
              <div class="col-md-4">
                  <select class="form-control pull-left">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-md-4">
          <div class="row">
              <div class="col-md-4">
                  <h4 class="pull-right">游戏属性：</h4>
              </div>
              <div class="col-md-8">
                  <select class="form-control pull-left">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select>
              </div>
          </div>
      </div>
      <div class="col-md-4">
          <div class="row">
              <div class="col-md-4">
                  <h4 class="pull-right">游戏属性：</h4>
              </div>
              <div class="col-md-5">
                  <select class="form-control pull-left">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select>
              </div>
          </div>
      </div>
      <div class="col-md-4">
          <div class="row">
              <div class="col-md-4">
                  <a href="javascript:void(0)" class="btn btn-default btn-success">查询</a>
                  <a href="javascript:void(0)" class="btn btn-default">导出</a>
              </div>
              <div class="col-md-8">


              </div>
          </div>
      </div>
  </div>
</div>
<script src="../root/jquery-1.11.1.min.js"></script> 
<script src="../root/dist/js/bootstrap.min.js"></script>
</body>
</html>

燃木刀法
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstarp拖拽布局例子
11-18
bootstarp拖拽布局例子,框架官网http://layoutit.justjavac.com/#close，实现类似QQ空间小窝布局模式下的自由布局功能。
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7086
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
bootstrap网格布局笔记
kikyou_csdn的博客
09-30 1525
bootstrap网格布局笔记 col-*不写列数时会平分 可以解决12列不能平分成5、7份这样的问题 &lt;div class="container-fluid"&gt; &lt;div class="row no-gutters"&gt; &lt;div class="col"&gt;&lt;img class="img-fluid
bootstrap 一排5个_BootStrap从基础到项目实战_第1季_03章_02_CSS样式栅格系统实例
weixin_34352414的博客
12-05 223
目标目标一、理解什么是栅格布局目标二、掌握栅格布局具体应用目标三、掌握BootStrap通用CSS样式(排版、代码、代码、表单、按钮、图片、辅助类、响应式工具)内容一、BootStrap全局CSS之 - 栅格系统实例1.1 栅格系统实例实战前的理论准备通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。从上面的截图可以看出来，Bootstrap针...
规格示例_最佳引导示例
cumi6497的博客
08-14 817
规格示例Bootstrap is a popular front-end framework for web development. It contains pre-built components and design elements to style HTML content. Modern browsers such as Chrome, Firefox, Opera, Safari, ...
五分钟掌握网格布局（grid）常用属性
热门推荐
csdn_zsdf的博客
08-13 2万+
与flex布局不同的是，网格布局（grid）是一个二维的布局，可以创建任意行列的布局。 首先来介绍几个概念; 想象一个五行五列的布局，网格线就是构成网格所有的线条，五行五列的布局每行就会有6条网格线。 网格轨道就是相邻两条平行的网格线之间的部分。 和flex布局一样，他会有父容器和子项目，在这儿我们称为网格容器和网格项。 接下来，我们从网格容器到网格项的各个基本...
grid网格布局实例
WU567_的博客
03-07 504
grid网格布局实例 一起来学习一下grid网格布局的一个小案例 eg：百度风云榜 上代码： （1）划分区域 按照图示首先划分七个区域： 结构： 样式： 1.划分为3列4行 （2）加上网格的间距： （3）找到网格指定的区域： 先加上红色的背景色看一下运行效果： （4）分别给每块加上颜色 此时每块的背景色就完成了： （5）给对应的块加上文字，再加上样式就完成这个简单的网格布局了 ...
Bootstarp栅格布局
学点的CSDN博客
05-24 562
Bootstarp翻译成中文是引导程序/辅助程序的意思，Bootstarp是一个开源的前端插件，把各种各样的css样式都封装好了，引入Bootstarp外部文件之后直接引用Bootstarp定义好的class就可以直接使用Bootstarp的样式，不需要自己再手动写样式，这样可以节约很多开发时间。在开发过程中我们最重要的是节约资源利用好资源，Bootstarp是别人封装好的一个资源，利用好这个资源可以为我们节约一大段开发时间，使程序员有更多的时间可以把项目做得更好
Bootstrap系列之布局工具
老__L的博客
05-24 446
布局工具
Bootstrap 网格系统布局详解
08-31
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。这篇文章主要介绍了Bootstrap 网格系统布局,需要的朋友可以参考下
Bootstrap商品图片网格布局代码
07-24
Bootstrap商品图片网格布局代码是一款基于bootstrap响应式框架制作商城商品图片网格列表布局，鼠标悬停图片滑动显示快捷小功能。
jQuery Bootstrap网格布局和列表布局切换代码
10-24
jQuery Bootstrap网格布局和列表布局切换代码
Bootstrap商品图片网格布局特效代码
03-20
Bootstrap商品图片网格布局代码是一款基于bootstrap响应式框架制作商城商品图片网格列表布局，鼠标悬停图片滑动显示快捷小功能。
springmvc中的RequestBody自动注入List, Map, String数据结构的数据
燃木刀法
04-30 2万+
不说废话，直接上代码： 1. JS: html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> page contentType="text/html;charset=UTF-8" language="java" %> xmlns="http://www.w3.o
CSS3响应式控制精灵图的大小和位置
燃木刀法
08-29 1万+
1. html          CSS3精灵图响应式控制          *{ margin: 0; padding: 0; border: 0; }     div{ position: relative;}     .box{ width: 80%; height: 100px; margin: 100px auto; border: 1px solid #f00; b
获取地址栏传值 地址栏 参数
燃木刀法
03-01 2884
html> html> head lang="en"> meta charset="UTF-8"> title>title> script type="application/javascript"> window.onload = function () { console.log(parseQueryString().id);
css3 竖排显示
燃木刀法
06-23 2407
Document     .vertical{ /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* IE */ -ms-transform: rotate(90deg); /* Opera */ -o-transform: rotate(9
响应式页面中的图片定位
燃木刀法
08-29 1477
CSS3控制盒子大小          *{ margin: 0; padding: 0; border: 0;}     body{ }     .box{ width: 90%; height: 200px; border: 1px solid rgba(0, 0, 0, 0.8); margin: 100px auto; }     .one{ width: 50%; height
Bootstrap 网格系统代码
最新发布
05-30
Bootstrap 网格系统是一种响应式的布局方式，可以在不同屏幕尺寸下自适应调整布局。以下是一个基本的 Bootstrap 网格系统代码： ```html <div class="col-sm-4">Column 1 <div class="col-sm-4">Column 2 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值