`

Bootstrap 第22章 首页内容[上]

 
阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; }
.tab-h2 { font-size: 20px; text-align: center; letter-spacing: 1px; color: #0059b2; }
.tab-p { font-size: 15px; text-align: center; letter-spacing: 1px; color: #999; margin: 20px 0 40px 0; }
.tab1 { margin: 30px 0; color: #666; }
.tab1 .text-muted { color: #999; text-decoration: line-through;}
.tab1 .media-heading { margin: 5px 0 20px 0;}
.tab1 .col { padding: 20px;}

/*没有小于768px,是因为Bootstrap3以移动端优先设计*/

/* 小屏幕(平板,大于等于768px) */
@media (min-width: 768px) {
	.tab-h2 { font-size: 26px; }
	.tab-p { font-size: 16px; }
}

/* 中等屏幕(桌面显示器,大于等于992px) */
@media (min-width: 992px) {
	.tab-h2 { font-size: 28px; }
	.tab-p { font-size: 17px; }
}

/* 大屏幕(大桌面显示器,大于等于1200px) */
@media (min-width: 1200px) {
	.tab-h2 { font-size: 30px; }
	.tab-p { font-size: 18px; }
}
</style>
</head>
<body>
<div class="tab1">
	<div class="container">
		<h2 class="tab-h2">「一站式共享网络」</h2>
		<p class="tab-p">阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
		<div class="row">
			<div class="col-md-6 col">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/tab1-1.png" class="media-object" alt=""></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">标题标题</h4>
						<p class="text-muted">删除线删除线删除线删除线删除线删除线</p>
						<p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/tab1-1.png" class="media-object" alt=""></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">标题标题</h4>
						<p class="text-muted">删除线删除线删除线删除线删除线删除线</p>
						<p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/tab1-1.png" class="media-object" alt=""></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">标题标题</h4>
						<p class="text-muted">删除线删除线删除线删除线删除线删除线</p>
						<p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/tab1-1.png" class="media-object" alt=""></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">标题标题</h4>
						<p class="text-muted">删除线删除线删除线删除线删除线删除线</p>
						<p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div style="height: 10000px;"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

效果图:

 

 

 

 

 

 

  • 大小: 34.6 KB
分享到:
评论

相关推荐

    李炎恢bootstrap3.pdf合并版带目录

    第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章,后面带开发实例!

    All Of Statistics 统计学完全教程 中英文版(中文版带书签)

    第22章 分类 第23章 重温概率:随机过程 第24章 模拟方法 英文版目录 Chapter 1 Probability. Chapter 2 Random Variables. Chapter 3 Expectation Chapter 4 Inequalities Chapter 5 Convergence of Random ...

    All Of Statistics 统计学完全教程 中英文高清版

    All Of Statistics Larry Wasserman 统计学完全教程 作者:(美国)活塞曼 译者:张波 中英文版都有,带详细书签,高清文字版 《统计学完全教程》除了介绍传统数理统计学的全部内容以外,还包含了...第22章 分类

    浙大版《概率论与数理统计》(第四版)第十一章实验数据、实验步骤与实验结果

    浙大版《概率论与数理统计》(第四版)第十一章实验数据、实验步骤与实验结果 内容包括: 1、概述(这个略过没有实验) 2、箱线图 3、假设实验 (一)假设检验问题p值的求法 (二)两个等方差正态总体的均值差的检验...

    知乎大神萧井陌web前端课程

    ------------------------课程介绍------------------------ ...第22章 python高级技巧、rpc实现和vagrant 第23章 架构、分布式、性能、聊天室项目 第24章 简历和工作、工作后的计划、学习的计划

    python入门到高级全栈工程师培训 第3期 附课件代码

    第22章 01 模块的补充 02 sys修改环境变量 03 BASEDIR的介绍 04 os模块的介绍 05 sys模块的介绍 06 json模块 07 pickle模块 08 shelve模块 09 XML模块 10 re模块简介 11 re模块之元字符 第23章 01 re模块之转义...

    SpringBoot最全企业级博客前后端视频教程

    第1章 Spring Boot 简介 1-1+_Spring+Boot博客_课程导学 1-2+-Spring+Boot+是什么 第2章 开启 Spring Boot ...第22章 博客系统总结 22-1 -后台项目结构 22-2 -前台项目结构 22-3 -系统集成、系统测试 22-4 -总结

    Spring Boot带前后端 渐进式开发企业级博客系统

    第1章 Spring Boot 简介 讲解Spring Boot的项目背景,已经与其他技术框架(比如,Spring、SpringMVC、SpringCloud等)的关系...第22章 博客系统总结 对所有模块进行集成,并进行集成测试。对整个系统进行总结及展望。

    基于SSM校园二手交易平台设计与实现.rar(毕业设计+项目源码+数据库文件+答辩PPT)

    第二章 相关技术介绍 10 2.1 Javascript 10 2.2 Ajax 10 2.3 MySQL 10 2.4 SSM框架 10 2.5 Maven框架 11 2.6 JSP 12 2.7 B/S模式 12 2.8 BootStrap 13 2.9系统开发平台及运行环境 14 2.9.1系统开发平台 14 2.9.2运行...

    基于SSM校园二手交易平台设计与实现源码+数据库(毕业设计).zip

    第二章 相关技术介绍 10 2.1 Javascript 10 2.2 Ajax 10 2.3 MySQL 10 2.4 SSM框架 10 2.5 Maven框架 11 2.6 JSP 12 2.7 B/S模式 12 2.8 BootStrap 13 2.9系统开发平台及运行环境 14 2.9.1系统开发平台 14 2.9.2运行...

    毕业设计-基于Java的医院预约挂号平台系统的设计与实现-设计与实现(源码 + LW + 演示视频).zip

    医院作为医疗服务的主体,人们大多都有“看病难”的问题,让患者就诊体验非常的不好。...第6章系统测试 22 6.1系统测试的目的 22 6.2测试的方法 22 6.3系统典型测试用例 22 第7章 总结 25 7.1 总结 25 7.2 后续工作展

    看透springMvc源代码分析与实践

    第22章 异步请求281 22.1 Servlet 3.0对异步请求的支持281 22.1.1 Servlet 3.0处理异步请求实例282 22.1.2 异步请求监听器Async-Listener284 22.2 Spring MVC中的异步请求286 22.2.1 Spring MVC中异步请求相关...

    网吧技术培训手册 技术员必看

    第十二章 网吧实战窍门 192 12.1 网卡工作不正常的几点非常见解决方法 192 12.2 IIS发布内网网站的问题 195 第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 ...

    网吧技术培训手册

    第十二章 网吧实战窍门 192 12.1 网卡工作不正常的几点非常见解决方法 192 12.2 IIS发布内网网站的问题 195 第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 ...

    锐起网吧技术培训手册网管必备

    第十二章 网吧实战窍门 192 12.1 网卡工作不正常的几点非常见解决方法 192 12.2 IIS发布内网网站的问题 195 第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 ...

    精通AngularJS part1

    第1章Angular之禅7 11邂逅AngularJS7 熟悉框架8 参与AngularJS项目8 社区8 在线学习资源9 库和扩展9 工具9 Batarang10 Plunker与jsFiddle10 IDE扩展和插件10 12AngularJS速成10 HelloWorld——AngularJS...

Global site tag (gtag.js) - Google Analytics