bootstarp网格布局简单实例
来源：互联网 发布：mfc单文档编程实例 编辑：程序博客网 时间：2024/06/03 19:21
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>
- bootstarp网格布局简单实例
- Android的网格布局设计简单实例--GridView
- Bootstarp 简单后台页面
- Bootstarp简单应用
- Android网格布局的简单使用
- android 简单的网格布局 GridLayout
- 网格布局
- 简单页面布局实例
- bootstarp
- bootstrap布局:网格布局
- 整合简单的CSS网格布局到WordPress
- 窗口的简单布局（流式、边框、网格、卡片）
- TableLayout 布局管理器简单实例
- Java_GUI_布局_网格布局
- 网页布局--CSS网格布局
- Layout布局之网格布局
- 相对布局和网格布局
- 边界布局和网格布局
- Android中的Menu介绍
- Ubuntu14.04 安装git
- Struts2的实际操作！简直不能太爽了
- 【Unity快速实现小功能】加载文本文件之——加载txt文件
- 网站会员整合ucenter 实现多站点同步登录方法
- bootstarp网格布局简单实例
- scanf和getchar的用法
- typing
- ubuntu下c／c++开发环境配置
- JS、CSS命名规范
- JSTL与EL表达式用法
- Android中canvas画图的简单应用
- 奋斗告诉对方告诉对方
- JS命名规范、引用规范
