Bootstrap 网格系统(Grid System)实例4：中型和大型设备

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品：中型和大型设备</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<style>
.col-md-6, .col-lg-4,.col-lg-8 {
background-color:#e5eecc;
box-shadow:inset 1px -1px 1px #aaaaaa,inset -1px 1px 1px #aaaaaa;
}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div class="col-md-6 col-lg-4">
<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 col-lg-8">
<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>
</div>

<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 网格系统(Grid System)实例4的更多相关文章

  1. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  2. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  3. Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  4. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

  5. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  6. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  7. Bootstrap 网格系统（Grid System）的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  8. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  9. BootStrap -- Grid System

    <script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...

随机推荐

  1. UnityEngine中Animator相关类的说明

    ---------------------------------------------------------------------- Animator 这个单独写,比较多 AnimationC ...

  2. [Xcode 实际操作]二、视图与手势-(2)UIView视图的层次关系

    目录:[Swift]Xcode实际操作 本文将演示创建三个视图对象,其中第二个视图是第三个视图的父视图. 现在开始编写代码,实现这项功能 import UIKit class ViewControll ...

  3. p标签中的文本换行

    参考文章 word-break:break-all和word-wrap:break-word的区别 CSS自动换行.强制不换行.强制断行.超出显示省略号 属性介绍 white-space: 如何处理元 ...

  4. 如何使用fastJson来解析JSON格式数据和生成JSON格式数据

    由于项目用到了JSON格式的数据,在网上搜索到了阿里的fastjson比较好用,特此记录fastjson用法,以备以后查询之用. decode: 首先创建一个JSON解析类: public class ...

  5. HTML实例之简单的网页布局

    需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...

  6. atomic用法

    memory order 源码变成可执行程序,一般由预编译,编译,汇编,链接.源码重排序一般分为编译期重排序和运行期重排序. 编译期重排序:编译器在不改变单线程程序的语义的前提下,可以重新安排语句的执 ...

  7. css3のborder-radius

    css3のborder-radius 今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧. 我觉得需要注意以下几点: 1.书写规范: -webkit- ...

  8. 关于.NET .cs后台提示并进行页面跳转代码

    在后台.CS页面中植入下面代码 string url = "<script>alert('xxx');window.location.href='"xxx.html&q ...

  9. 借助Code Splitting 提升单页面应用性能

    近日的工作集中于一个单页面应用(Single-page application),在项目中尝试了闻名已久的Code splitting,收获极大,特此分享. Why we need code spli ...

  10. I/O————缓存流

    为什么要使用缓存流? 当对磁盘访问次数多的时候,字节流和字符流就会感觉性能不佳,速度较慢. 缓存流,一次会读取很多的数据到缓存中,以后每一次读取都是从缓存中读取,直到缓存中数据读取完,这样就减少了io ...