码迷，mamicode.com
首页 > 其他好文 > 详细

简单的bootstarp项目实例

时间：2018-07-16 23:09:18      阅读：218      评论：0      收藏：0      [点我收藏+]

标签：语音搜索   项目实例   targe   网站维护   head   java   人才   交互   优先   

===========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项目实例

标签：语音搜索   项目实例   targe   网站维护   head   java   人才   交互   优先   

原文地址：https://www.cnblogs.com/www-x/p/9320753.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！