bootstrap+html5+css3
一、栅格和块阴影
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 堆叠的水平</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body> <div class="container">
<h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 5px -5px 5px #444, inset -5px 5px 5px #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 -10px 10px 10px #0000ff;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p> <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div> </body>
</html>
box-shadow: inset 5px -5px 5px #444, inset -5px 5px 5px #444;
阴影向内，不写inset，默认阴影向外，后面四个参数依次为：左、下、向内扩散大小，阴影颜色；后一组参数依次为：阴影向内、右、上、向内扩散大小、阴影颜色；
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。
响应式的列重置
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-3"> </div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-3"></div>
偏移列
<div class="row" >
<div class="col-xs-6 col-md-offset-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.
</p>
</div>
</div>
嵌套列
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3">
<h4>第一列</h4>
</div>
<div class="col-md-9">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
列排序
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8">
我在左边
</div>
<div class="col-md-8 col-md-pull-4">
我在右边
</div>
</div>
二、排版
内联子标题
<h1>我是标题1 h1. <span class="small">我是副标题1 h1</span></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
引导主体副本
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。</p>
强调
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 强调</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p> </body>
</html>
缩写
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
地址
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">mailto@somedomain.com</a>
</address>
列表
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
排版类总结
类 描述
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动 scrollable
bootstrap+html5+css3的更多相关文章
- 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板
创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...
- 10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
- 25+免费的Bootstrap HTML5网站模板
在前端框架中,Bootstrap可以说是非常有名的高级网站设计框架.网上也有很多使用Bootstrap程序创建的免费模板.这些模板设计成响应式模式,因此你可以使用它们来为所有的设备平台和浏览器创建网站 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
随机推荐
- ES学习2
1:es中的分页 一般搜索引擎中的分页都不会提供很大的页面查询,因为查询的页码越大,查询效率越低. 例子: 我们就先预想一下我们在搜索一个拥有5个主分片的索引.当我们请求第一页搜索的时 候,每个分片产 ...
- Hibernate--关系映射和关联关系的CRUD
- Python 之 向上取整、向下取整以及四舍五入函数
import math f = 11.2 print math.ceil(f) #向上取整 print math.floor(f) #向下取整 print round(f) #四舍五入 #这三个函数的 ...
- ST500LT012-1DG142硬盘參数
ATA 设备物理信息 制造商 Seagate 硬盘名称 Momentus Thin 500LT012 形状特征 2.5" 格式化容量 500 GB 盘片数 1 记录面 2 外形尺寸 100 ...
- LogCat大量Unexpected value from nativeGetEnabledTags: 0
在执行模拟器的时候.LogCat 输出非常多Unexpected value from nativeGetEnabledTags: 0 提示.导致非常多本来须要输出的信息被瞬间覆盖了,查询后得知是sd ...
- 关于多层for循环迭代的效率优化问题
关于多层for循环迭代的效率优化问题 今天笔试的时候遇到这么一道题目 说有上面这么循环嵌套 .问怎么优化 并说明原因. for(int i = 0 ; i < 1000 ;i++){ ...
- struct iphdr中的__LITTLE_ENDIAN_BITFIELD和__BIG_ENDIAN_BITFIELD
__LITTLE_ENDIAN_BITFIELD表示小端序,__BIG_ENDIAN_BITFIELD表示大端序. /usr/include/linux/ip.h中有一段代码定义了ip首部的结构体,例 ...
- linux下常用FTP命令 1. 连接ftp服务器
1. 连接ftp服务器 格式:ftp [hostname| ip-address] a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密 ...
- POJ 3211 Washing Clothes 背包题解
本题是背包问题,可是须要转化成背包的. 由于是两个人洗衣服,那么就是说一个人仅仅须要洗一半就能够了,由于不能两个人同一时候洗一件衣服,所以就成了01背包问题了. 思路: 1 计算洗完同一颜色的衣服须要 ...
- port被占用的处理方法
開始--执行--cmd 进入命令提示符 输入netstat -ano 就可以看到全部连接的PID 之后在任务管理器中找到这个PID所相应的程序假设任务管理器中没有PID这一项,能够在任务管理器中选&q ...