<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body {
height:100%;
width:100%;
border:0px;
margin:0px;
padding:0px
}
.row {
width:100%;border:0px
}
.col-1 {
float:left;
height:100%;
background-color: red;
width:16.6%
}
.col-2 {
float:left;
height:100%;
background-color: blue;
width:33%
}
.col-3 {
float:left;
height:100%;
background-color: green;
width:50%
}
.col-4 {
float:left;
height:100%;
background-color: lightblue;
width:66.9%
}
.col-5 {
float:left;
height:100%;
background-color: lightgreen;
width:83.4%
}
.col-6 {
float:left;
height:100%;
background-color: orange;
width:100%
}
</style>
</head>
<body>
<div class="row" style="height:200px" >
<div class=" col-2"> <div class="row" style="height:200px" >
<div class=" col-4">444</div> <div class=" col-2">2222</div>
</div></div> <div class=" col-1">1111</div> <div class=" col-3">3333</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-1">111</div> <div class=" col-5">555</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-3">333</div> <div class=" col-3">333</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-2">222</div> <div class=" col-4">4444</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-6">6666</div>
</div>
</body>
</html>
分享到：
相关推荐
Bootstrap栅格系统
Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...
前端栅格系统样式 css样式 bootstrap.css bootstrap.css.map bootstrap.min.css bootstrap.min.css.map bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css bootstrap-theme.min.css.map fonts ...
Bootstrap3修改版 原有的12个栅格改为24个，方便控制多元素行
个人毕业设计用bootstrap框架写的，个人觉得还不错 个人毕业设计用bootstrap框架写的，个人觉得还不错 个人毕业设计用bootstrap框架写的，个人觉得还不错
在"Bootstrap写的前端页面"中，我们可以了解到以下关键知识点： 1. **响应式设计**：Bootstrap采用了流式网格系统，可以根据不同设备的屏幕尺寸自动调整页面布局。这使得页面在手机、平板电脑和桌面电脑上都能保持...
在“Jasny-Bootstrap 的简单实例”中，我们将探讨如何利用这个库来实现固定格式的文本展示和其他特性。 首先，Bootstrap是一个流行的前端开发框架，它包含了CSS、JavaScript组件和字体图标，用于快速构建响应式和...
这个基于Bootstrap的简单后台管理系统采用了扁平化设计，以简洁、实用为主要特点，旨在提供一个易于理解和使用的操作界面。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它是一个CSS/HTML框架，包含...
6. **JavaScript插件**：Bootstrap还提供了许多JavaScript插件，如滚动监听、下拉菜单、轮播等，这些插件可以通过简单的数据属性和JavaScript调用来启用，增强了交互性和用户体验。 7. **字体图标**：Bootstrap内置...
Bootstrap栅格系统是网页开发中的一个关键组成部分，它是一种用于创建响应式布局的工具，能够帮助开发者轻松地在不同屏幕尺寸上对齐和排列内容。Bootstrap框架由Twitter开发，是目前最流行、最广泛使用的前端开发...
这个“bootstrap写的后台管理系统”显然利用了Bootstrap的强大功能，为后端开发者提供了一个用户界面美观、操作直观的管理平台。 首先，Bootstrap的核心特性在于其响应式设计，这意味着系统界面能够自动适应不同...
你可以利用Bootstrap的栅格系统调整内容在不同设备上的排列方式，确保在任何屏幕尺寸下，信息都能清晰、易读。 在这款模板中，你可能会发现以下关键元素： 1. **头部（Header）**：包含个人头像、姓名和联系信息，...
在“bootstrap简单demo”这个项目中，我们将深入理解Bootstrap的核心概念和基本用法，包括录播图、栅格系统以及响应式布局。 首先，让我们谈谈录播图（Carousel）。在Bootstrap中，录播图是一种展示图片或内容轮播...
Bootstrap的核心特性包括栅格系统、预定义的样式、JavaScript插件以及易于定制的设计。 ### StartBootstrap-Bare结构 `StartBootstrap-Bare`模板包含了Bootstrap框架的基本元素，如CSS和JavaScript文件，以及一个...
Bootstrap表格和栅格分页是前端开发中常用的技术，用于展示和管理大量数据。在本实例中，我们将探讨如何在HTML页面中创建一个Bootstrap风格的表格，并结合分页功能进行数据展示。 首先，Bootstrap框架提供了预定义...
Bootstrap栅格系统是Web开发中的一个关键工具，它允许开发者创建具有高度响应性和自适应性的网页布局。这个系统是Bootstrap框架的核心组成部分，旨在简化多设备显示的复杂性，确保网页在PC、平板和手机等不同屏幕...
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它...每个部分都包含了与该主题相关的简单有用的实例。
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面...
栅格系统是Bootstrap实现页面布局的主要方式，它允许开发者通过简单的类名控制元素的排布，从而轻松创建复杂的网页结构。 Bootstrap栅格系统基于12列的网格布局，这意味着你可以将一个容器内的空间分为12等份。这种...