吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:嵌套列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 嵌套列</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div> <div class="col-md-9" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p> 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>
</div>
</div> <div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
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.</p>
</div>
</div> </div> </div> </div> </body>
</html>
吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:嵌套列的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:偏移列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:响应式的列重置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:手机、平板电脑、台式电脑
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:中型和大型设备
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:堆叠的水平
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:列排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:引用(Blockquote)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:地址(Address)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:缩写
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...
随机推荐
- 【PAT甲级】1109 Group Photo (25分)(模拟)
题意: 输入两个整数N和K(N<=1e4,K<=10),分别表示人数和行数,接着输入N行每行包括学生的姓名(八位无空格字母且唯一)和身高([30,300]的整数).按照身高逆序,姓名字典序 ...
- iOS 自动化打包发布(Fastlane+ Jenkins+蒲公英)
安装 Xcode 命令行工具:xcode-select --install 安装 fastlane:sudo gem install fastlane --verbose 安装成功后查看版本:fast ...
- P&R 7
Floorplan: 要做好floorplan需要掌握哪些知识跟技能? 通常,遇到floorplan问题,大致的debug步骤跟方法有哪些? 如何衡量floorplan的QA? [哥简单点说]:flo ...
- android基础控件的使用
控件在屏幕上位置的确定 通常情况下控件在屏幕上确定至少要连接两条线(一条水平,一条垂直) 如下图连接了四条线 辅助线 辅助线的调出: 水平辅助线:进入activity.xml的设计模式之后如下图 为了 ...
- 2020牛客寒假算法基础集训营3 - G. 牛牛的Link Power II(线段树)
题目链接:牛牛的Link Power II 题意:给你一个只含$0$和$1$的串,定义串的$Link$值为串中两个的$1$之间的距离的和,$(u,v)$和$(v,u)$被看认为是同一对,有$m$次操作 ...
- netty(八)buffer源码学习3
问题 : compositeByteBuf 是干什么和其他 compositeByteBuf 有何区别 内部实现 概述 compositeByteBuf 就像数据库中的视图,把几个表的字段组合在一起, ...
- oracle 多表查询,请教个问题
首先,是有一个合同表,对应数据库表 lg_bill_of_lading_detail 简称 bold 有一个用户表 EMT_USER 简称 e 合同审批 后,合同表里 会有一个审核人AUDI ...
- RT_THREAD之nano学习
nona版本为精简版本,只保留FISH(选配)最小内核,可以适配STM的STD.HAL/LL库,需要手动进行移植:现在可以在KEIL MDK/CUBEMX中进行集成,也可以RT-Thread Nano ...
- 【C语言】创建一个函数,并调用比较两个数的大小
#include <stdio.h> int max(int x,int y) { if(x>=y) return x; else return y; } main() { int ...
- 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在IOS和android的底部tabs显示不一样.在安卓情况下底部tabs会浮上去. 如下图展示: 网上也有很多此类的解决方案 ...