bootstrap8-堆叠的水平

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content=" width=device-width,

initial-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

<title>bootstrap8</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h1>Hello, world!</h1>

<div class="row">

<div class="col-md-6" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

<div class="col-md-6" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

</div>

<hr>

<div class="row">

<div class="col-md-3" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

<div class="col-md-9" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

</div>

<hr>

<div class="row">

<div class="col-md-7" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

<div class="col-md-5" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

</div>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间: 2024-10-11 11:49:25

bootstrap8-堆叠的水平的相关文章

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

【前端】响应式媒体查询

响应式媒体查询 媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> <link rel="stylesheet&

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

Bootstrap 网格系统

Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTM

全局CSS样式

bootstrap全局css样式:一共12个内容模块 概览 栅格系统 排版 代码 表格 表单 按钮 图片 辅助类 响应式工具 使用Less 使用Sass 一.概览类 1.html5文档类型 <!DOCTYPE html> 2.移动设备优先 <meta name="viewport" content="width=device-width, initial-scale=1"> 3.排版与链接 bootstrap排版.链接样式设置了基本的全局样式

BootStrap基本控件

简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Otto和Jacob Thomton开发的. BootStrap是2011年八月在GitHub上发面的开源产品. 为什么使用BootStrap 移动设备优先的响应式网格, 从BootStrap3.0开始, 框架将包含了移动终端设备的优先的样式. 浏览器支持IE, Firefox, opera, chrom

bootstrap入门-3.响应式原理

Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .row 和 .col-xs

Bootstrap学习:Bootstrap 网格系统

前面3节其实就是对w3c菜鸟日记的一个粘贴复制,下面开始真正的学习之路不过之. Bootstrap 网格系统 先做个介绍吧,看不懂的可以掠过,一样取自<w3c菜鸟日记> 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的非常有效的方法. 简单地说,网页设计中的网格用于组织内容,

Android最佳实践之高效的应用导航

设计(一)- 规划Screens和他们之间的关系 原文地址:http://developer.android.com/training/design-navigation/screen-planning.html#beyond-simplistic-design 设计和开发Android应用程序的第一个步骤是确定用户能够查看和处理应用.一旦你知道用户与之交互的应用程序之间交互什么数据,下一步就是设计交互,允许用户导航到app的不同部分,进入和退出应用程序中的界面. 这篇文章开始向你展示如何规划高

【03】全局 CSS 样式

全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTYPE html> <html lang="