Bootstrap 网格系统(Grid System)实例5：手机，平板电脑，笔记本或台式电脑

<!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 href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-sm-3, .col-sm-9, .col-md-6, .col-lg-4, .col-lg-8 {
background-color:#e5eecc;
box-shadow:inset 1px -1px 1px #c3c3c3,inset -1px 1px 1px #c3c3c3;

}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div class="col-sm-3 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-sm-9 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)实例5的更多相关文章

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

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  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. 利用Web服务生成产品编号 执行添加操作

    为什么我想要执行添加操作,却添加不成功,系统提示我comm.ExecuteNonQuery有错误 已找到原因 在 string strsql = "insert into tb_goods( ...

  2. c++中初始化列表的初始化变量顺序问题

    例题来看:请问下面程序打印出的结果是什么? #include <iostream> #include <string> using namespace std; class b ...

  3. 普通平衡树与文艺平衡树的splay代码

    主要综合借鉴了yyb和马前卒两位大佬的. //普通平衡树 #include <cstdio> #include <cctype> #include <cstring> ...

  4. python 生成器与迭代器

    #! /usr/bin/env python# -*- coding:utf-8 -*- def xrange(n): num = 0 while True: if num > n: retur ...

  5. 542 01 Matrix 01 矩阵

    给定一个由 0 和 1 组成的矩阵,找出每个元素到最近的 0 的距离.两个相邻元素间的距离为 1 .示例 1:输入:0 0 00 1 00 0 0输出:0 0 00 1 00 0 0 示例 2:输入: ...

  6. ruby 正则匹配返回值matchdata

    引用连接: 为处理与正则表达式的匹配过程相关的信息而设置的类. 可以通过下列途径 Regexp.last_match Regexp#match, String#match $~ 得到该类的实例. 超类 ...

  7. na 残

    题目描述: 对于斐波那锲数列f(0)=0,f(1)=1,....求f(f(n)的值 0<=n<=10^100 给出T组数据,每行一个n 输出n行 f(f(n)) 样例输入: 4 0 1 2 ...

  8. JAVA 时间的使用

    今天老师又没有讲新课,不过讲了练习题,扩展了一下我们的思维. 今天就讲一下如何获取时间吧. 代码: import java.util.* public class Test{ public stati ...

  9. 解决部分浏览器不能显示itext生成的PDF文件文本域内容问题

    利用Itext可以实现pdf的高效动态生成,但在实践过程中遇到了一个问题: 即itext利用map中的值设置到pdf模板上建立的文本域中时:能成功生成,但是在部分浏览器上(360,QQ,等浏览器)无法 ...

  10. DVWA之命令注入（command injection）

    Command injection就是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的 LOW 无论是Windows还是Linux,都可以使用&&连接多个命令 执行 ...