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 ...

随机推荐

fail-fast和fail-safe
一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加.删除.修改),则会抛出Concurrent Modification Exceptio ...
SSM 整合
--- 分为三层: DAO层:负责与数据源进行交互 Service:业务处理层,也可称为服务层,对上层提供统一接口的服务. Controller: 控制器层,负责处理来自客户端的请求. 通用配置: d ...
WCF（一）
摘自:http://www.cnblogs.com/yank/p/3653160.html WCF入门教程(一)简介 1.WCF是什么? WCF( Windows Communication Foun ...
关于Cocos2d-x中字体的使用
1.如果使用的是系统自带的 static Label* createWithSystemFont ( const std::string & text, const std::s ...
【转】【OPenGL】OPenGL 画图板-- 中点算法画圆
为了能以任意点为圆心画圆,我们可以把圆心先设为视点(相当于于将其平移到坐标原点),然后通过中点法扫描转换后,再恢复原来的视点(相当于将圆心平移回原来的位置). 圆心位于原点的圆有四条对称轴x=0,y= ...
DirectoryEntry 账户启动与停用以及创建账户等
启动账户: DirectoryEntry usr = new DirectoryEntry("LDAP://CN=New User,CN=users,DC=fabrikam,DC=com&q ...
linux cpio
在使用bootimg tools压缩和打包android的ramdisk时,用到了cpio命令.所以了解一下用法. 参考 http://man.linuxde.net/cpio http://cn.l ...
mysql -- 循环插入数据到表中
备忘: 1.经搜索发现,MySql不支持直接写SQL语句实现循环插入功能. 想要实现该功能,可以用其他语言操控MySql来实现,或者用存储过程来实现(Store Procedure--SP). 2 ...
Centos下查看和修改网卡Mac地址
linux/Centos下查看网卡Mac地址,输入命令: #ifconfig -a eth0 Link encap:Ethernet HWaddr 00:e4:56:2E:D8:20 00:e4:56 ...
R基本介绍
一.基本介绍:1. 警告:在输入命令前请切换到英文模式.否则你的一大段代码可能因为一个中文状态的括号而报错,R语言的报错并不智能无法指出错误的具体位置.最可怕的是不报错但就是无法输出正确结果.2. 警 ...

bootstrap+html5+css3

一、栅格和块阴影

二、排版

bootstrap+html5+css3的更多相关文章

随机推荐

热门专题