简单的bootstarp项目实例

Posted www-x

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的bootstarp项目实例相关的知识,希望对你有一定的参考价值。

===========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>  邮箱:[email protected] </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项目实例的主要内容,如果未能解决你的问题,请参考以下文章

使用bootstarp前端组件集成的table 分页组件 ;简单上手使用实现前端分页功能

HTML:Marked-js+Bootstarp简单实现Markdown文本编辑器

bootstarp_项目实战__瓢城企业(注释+源码)

创建片段而不从 java 代码实例化它

Bootstarp-switch(动画开关插件)

web前端开发JQuery常用实例代码片段(50个)