首页 > 其他 > 详细

简单的bootstarp项目实例

时间：2018-07-16 22:57:13      阅读：297      评论：0      收藏：0      [点我收藏+] 
===========index.html==============
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<!--
        	作者：offline
        	时间：2018-07-16
        	描述：导航栏模块
        -->
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
					<a class="navbar-brand" href="#">蓝桥学院</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">论坛</a>
						</li>
						<li>
							<a href="#">前端开发</a>
						</li>
						<li>
							<a href="#">最新课程</a>
						</li>
						<li>
							<a href="#">移动APP</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<!--
    	作者：offline
    	时间：2018-07-16
    	描述：home模块
    -->
		<section class="home">
			<div class="lvjing">
				<div class="container">
					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<h1>bootstrap实战课程等你来战！</h1>
							<p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
							<p>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
							<img src="img/php.jpg" />
						</div>
						<div class="col-md-1"></div>
					</div>
				</div>
			</div>
		</section>

		<!--
	作者：offline
	时间：2018-07-16
	描述：bbs模块
-->
		<section class="bbs">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<a>
							<img src="img/a.png" />
							<h4>Android开发</h2>
					<p>djvnfdhvnxkffvn</p>
				</a>
			</div>
			<div class="col-md-4">
				<a>
					<img src="img/b.png"/>
					<h4>Android开发</h2>
					<p>djvnfdhvnxkffvn</p>
				</a>
			</div>
			<div class="col-md-4">
				<a>
					<img src="img/i.png"/>
					<h4>Android开发</h2>
					<p>djvnfdhvnxkffvn</p>
				</a>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：html5_imgR
-->
<section class="html5-R">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h2>HTML5前端开发</h2>
				    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
					<p>
						<span class="glyphicon glyphicon-grain"></span>
						使用HTML5与CSS3技术轻松实现设备自适应展示。
					</p>
					<p>
						<span class="glyphicon glyphicon-grain"></span>
						清晰明了的语义代码结构，更高的可读性、更利于页面维护的。
					</p>
			</div>
			<div class="col-md-6">
				<img src="img/html5.jpg"/>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：bootstrap区域
-->
<section class="bootsrap">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<img src="img/Bootstrap.jpg"/>
			</div>
			<div class="col-md-6">
				<h2>bootstrap实战视频教程</h2>
				<p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目!</p>
				<p>
					<span class="glyphicon glyphicon-grain"></span>
					你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。
				</p>
				<p>
					<span class="glyphicon glyphicon-grain"></span>
					Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
				</p>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：new learn
-->

<section class="learns">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h2>新课程</h2>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
			<div class="col-md-3">
				<img src="img/swift.jpg"/>
				<span>
					<button class="btn btn-default btn-lg">加入学习</button>
				</span>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：app下载区域
-->
<section class="load">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h2>蓝桥学院移动APP下载</h2>
		        <p>
		        	全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！
		        </p>
		        <button class="btn btn-primary">
		            <span class="glyphicon glyphicon-download-alt"></span>
		            iPhone版
		        </button>
		        <button class="btn btn-primary">
		            <span class="glyphicon glyphicon-download-alt"></span>
		            Android版
		        </button>
			</div>
			<div class="col-md-6">
				<img src="img/app-banner.jpg"/>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：contact联系区域
-->
<section class="contact">
	<div class="lvjing">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<h2>
					<span class="glyphicon glyphicon-send"></span>
					联系小蓝
				</h2>
					<p>
						国信蓝桥教育科技（北京）股份有限公司是一家泛互联网公司，致力于以竞赛、创业、培训和招聘多种形式，线上线下相结合连接高校和社会，推动教育改革、人才成长和社会进步。公司总部位于北京，并在北京亦庄、中关村和广东东莞等地设置分支机构。
					</p>
					<address>
		            <p>
		                <span class="glyphicon glyphicon-home"></span> 
		                                地址:北京市大兴区大族广场T2栋10层
		            </p>
		            <p>
		                <span class="glyphicon glyphicon-phone-alt"></span>  
		                                 联系电话：4006-588-662
		            </p>
		            <p>
		                <span class="glyphicon glyphicon-envelope"></span> 
		                                 邮箱:rjxy@lanqiao.org
		            </p>
		       </address>
				</div>
				<div class="col-md-6">
					<form class="form-horizontal" role="form">
						<div class="row">
							<div class="col-md-6">
								<input type="text" class="form-control" id="firstname" placeholder="您的姓名">
							</div>
							<div class="col-md-6">
								<input type="text" class="form-control" id="lastname" placeholder="您的邮箱">
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<input type="text" class="form-control" id="firstname" placeholder="标题">
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<textarea class="form-control" rows="3" placeholder="留言"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default">提交</button>
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>
</section>


<!--
	作者：offline
	时间：2018-07-16
	描述：底部区域
-->
<footer>
	<div class="container">
		<div class="row">
		    <div class="col-md-12">
		        <p>
		            Copyright ? 2012-2015  www.lanqian.org  蜀ICP备13014270号-4
		        </p>
		    </div>
		</div>
	</div>
</footer>

</body>
	<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</html>

　　该项目css样式

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 25px;
    line-height: 20px;
    
}

.navbar-default .navbar-brand {
    color: cadetblue;
    padding-left: 100px;
    font-weight: bold;
}
.container-fluid {
    padding-right: 100px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 50px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.home{
	text-align: center;
	background: url(../img/home-bg.jpg);	
	width: 100%;
	height: 700px;
	background-size: cover;
}
.home .lvjing{
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
}

.home h1{
	padding-bottom: 20px;
	color: white;
}

.home p{
	padding: 5px;
	color: white;
}

.bbs{
	margin-top: 50px;
	padding: 80px,0px;
	text-align: center;
}

.bbs a{
	text-decoration: none;
	color: black;
}

.bbs .col-md-4:hover{
	background-color: gainsboro;
}

.html5-R .container{
	margin-top: 50px;
	padding-top: 60px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	background-color: gainsboro;
}

p span.glyphicon.glyphicon-grain{
	background: #4ada95;
    border-radius: 60%;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-right: 20px;
    color: #fff;
    line-height: unset;
}

.bootsrap .container{
	padding-top: 50px;
	padding-bottom: 40px;
	padding-right: 40px;
	padding-left: 0px;
}

.learns h2{
	text-align: center;
	margin-bottom: 20px;
}
.learns button{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 80px;
	padding-left: 20px;
	padding-right: 20px;
	border-color: gold;	
}

.load .container{
	margin-top: 50px;
	margin-bottom: 50px;
}

.load h2{
	margin-bottom: 40px;
}

.load p{
	margin-bottom: 20px;
}

.load .btn.btn-primary{
	background-color: cadetblue;
}
.contact{
	background:url(../img/contact-bg.png);
	background-size: cover;	
	height: 300px;
}

.contact .container{
	padding-top: 50px;
	margin-bottom: 50px;
}
.contact .lvjing{
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
}

.contact h2{
	color: white;
}
.contact p{
	color: white;
}

.contact .form-horizontal .row{
	margin-bottom: 20px;
}

.contact .form-group .btn.btn-default{
	background-color: cadetblue;
	padding-left: 150px;
	padding-right: 150px;
}	

footer{
	text-align: center;
	margin-top: 30px;
}

　　还需插入的组件包括（网上都有）

bootstrap.min.css 

bootstrap.min.js

jquery-3.2.1.js

最后效果图

技术分享图片

 

简单的bootstarp项目实例

原文：https://www.cnblogs.com/www-x/p/9320753.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！