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 ...
随机推荐
- win10计算机打开不要是“快速访问”功能？
win10的文件夹选项中---常规--最上端调整
- 查询一个字符串的子串出现的次数在sql中
select name,char_length(name)-char_length(replace(name,'aaaaaa','')) from teacher; 将原来的字符串字段取出长度 将子 ...
- Ubuntu-Python2.7安装 scipy,numpy,matplotlib 和pip
一. scipy,numpy,matplotlib sudo apt-get install python-scipy sudo apt-get install python-numpy sudo a ...
- QT 交叉编译工具选择
使用QT交叉编译,生成的都是x86的可执行文件.Zoro告诉我交叉工具配置错了. 参考链接: http://www.cnblogs.com/zengjfgit/p/4744507.html linux ...
- 网络协议之bt---bt协议详解 DHT篇（下)
-------------------------author:pkf -------------------------------qq:1327706646 ------------------- ...
- Fastqc 能够识别的碱基编码格式
Fastqc 能够自动识别序列的碱基编码格式,我查看一下源代码,发现是碱基编码格式一共分为 1)sanger/illumina 1.9 2) illumina 1.3 3) illumina 1.5 ...
- Spring-DispatcherServlet说明
使用spring MVC,配置DispatcherServlet是第一步. DispatcherServlet是一个Servlet,所以可以配置多个DispatcherServlet. Dispatc ...
- html5实现刮刮卡效果
通过Canvas实现的可刮涂层效果. 修改img.src时涂层也会自动适应新图片的尺寸. 修改layer函数可更改涂层样式. 涂层: 可刮效果: 以下是HTML源代码(已增加移动设备支持): 1 2 ...
- 了解一下Windows Cracker
Windows Cracker 消息拆析宏 可以为消息进行参数分解 无需记住或查阅资料来了解WParam和lParam的意义 可以忘记旧的消息处理方式:switch/case 不适合于大型复杂的需要处 ...
- mysqldump工具,通过--where选项,导出指定表中指定数据?
需求描述: 今天在使用mysqldump工具导出表的时候,考虑能不能导出满足条件的数据行,不要 将表都导出来,查找资料,通过--where选项,就可以实现目的,做个实验,在此记录下. 操作过程: 1. ...