bootstrap栅格系统制作标记和巨幕广告(实例)

作者(出处):百宝箱工作室发布时间:2018年4月5日 13:32:30查阅量:365

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-05
        	描述:标记与巨幕
        	1.标记  用badge样式实现
        	2.巨幕  用jumbotron样式实现
        	注意:巨幕分为两种,一种是不铺满屏幕的,一种是铺满屏幕的。
        	巨幕这个样式可以用来实现大屏的广告。
        -->
		<div class="container">
			<!--1.标记(多少条未读消息)-->
			<div class="row">
				<a href="#">未读消息<span class="badge">27</span></a>
				<button class="btn btn-primary">未读消息<span class="badge">27</span></button>
			</div>
			<!--2.巨幕(未铺满屏幕)-->
			<div class="row">
				<div class="jumbotron">
					<h2 style="font-weight:bold;">百宝箱工作室的三大业务</h2>
					<p>【业务1】网站开发:主要承接基于ASP.NET技术框架的网站开发,可以是个人站、企业站、电子商务网站、或者学校网站。</p>
					<p>【业务2】网站建设与维护:如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
					<p>【业务3】IT微课堂项目教学:目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
					<p><a href="#" class="btn btn-danger">业务咨询QQ 425680248</a></p>
				</div>
			</div>
		</div>
		<!--3.巨幕(铺满屏幕)-->
		<div class="jumbotron">
			<div class="container">
				<h2 style="font-weight:bold;">百宝箱工作室的三大业务</h2>
				<p>【业务1】网站开发:主要承接基于ASP.NET技术框架的网站开发,可以是个人站、企业站、电子商务网站、或者学校网站。</p>
				<p>【业务2】网站建设与维护:如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
				<p>【业务3】IT微课堂项目教学:目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
				<p><a href="#" class="btn btn-danger">业务咨询QQ 425680248</a></p>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息