简单的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>
邮箱: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项目实例的更多相关文章
- Automake创建项目
autoconf和automake可以方便的构建linux下项目,一个简单的automake项目实例,麻雀虽小五脏俱全,以后无外乎在这基础上扩展相应的宏完善而已. ．首先建立项目目录树 )创建目录树 ...
- Bootstarp的安装以及简单的使用方法（pycharm中）
一.安装 首先打开Bootstarp的官网:https://v3.bootcss.com 下载完成后,解压压缩包,把解压后的文件导入pycham中 在HTML页面中的style中导入bootstrap ...
- django开发项目实例3--用session是实现简单的登陆、验证登陆和注销功能
如果你的网页不是纯阅读型的,那么你很有可能希望在用户打开某些界面的时候需要验证用户是否登陆的信息, 虽然django里面有自带的一些user的类,但我看不懂,并且自己实现也不是很难,下面和大家分享一下 ...
- Mob.com 短信验证的简单使用
1.环境配置 http://wiki.sharesdk.cn/android-短信sdk集成文档/ a.sdk下载 http://www.mob.com/#/downloadDetail/SMS/an ...
- 一步一步实现MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆（一） 验证码 Captcha 之大插件小用
不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆. 前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- Away3d 基础 1 ---对一个简单类的解释
转自:http://www.cnblogs.com/nooon/archive/2009/05/16/1458334.html 原英文地址: http://www.flashmagazine.com/ ...
- 玩转Bootstarp(连载)
一.Bootstarp是什么? 简单.灵活的用于搭建WEB页面的HTML.CSS.JS的工具集 (基于HTML5和CSS3) 总结:简洁强大的前端开发框架,可以让WEB开发更迅速.更简单 二.如何使用 ...
- Mvc项目实例 MvcMusicStore 五
Mvc项目实例 MvcMusicStore 一Mvc项目实例 MvcMusicStore 二Mvc项目实例 MvcMusicStore 三Mvc项目实例 MvcMusicStore 四Mvc项目实例 ...
随机推荐
- Qt信号槽第5个参数
1.Qt::AutoConnection: 默认值,使用这个值则连接类型会在信号发送时决定.如果接收者和发送者在同一个线程,则自动使用Qt::DirectConnection类型.如果接收者和发送者不 ...
- 9、Docker私有registry
Docker Registry分类 Docker 默认是使用https的,但是如果在自己得私有局域网中,你指明使用http也是可以的. Registry主要的作用是托管镜像: 运行docker reg ...
- 移动质量（MQ）测试系列
移动质量(MQ)测试 向移动开发者提供专业.稳定.全面.高价值的自动化测试平台. 发现 APP 中的各类隐患,包括 APP 崩溃.各类兼容性.功能性.性能问题等等. MQ 的 5 大功能(兼容性测试. ...
- Qt551.主窗体Margin
1.直接拖控件的方式,Margin的设置 不是在 MainWindow中 而是在 MainWindow下面的centralwidget中,如下图: 2. 3. 4. 5.
- Cordova入门系列（一）创建项目
Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的,原理是什么.经常会有这样的困惑: 它是一个可 ...
- How to view the DNS address assigned by DHCP
nmcli connection show clear-corporate | grep IP4 IP4.ADDRESS[1]: 101.8.112.9 ...
- 超详细的java集合讲解
1 集合 1.1 为什么会出现集合框架 [1] 之前的数组作为容器时,不能自动拓容 [2] 数值在进行添加和删除操作时,需要开发者自己实现添加和删除. 1.2 Collection接口 1.2.1 C ...
- HeadFirstPython学习笔记——OSError: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
1.文件构成如下 2.运行服务器时报错 OSError: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试. 解决方法:更换端口 3.Python的CGI跟踪术 在 ...
- 软件工程——四则运算py（我小学的时候怎么没用过这东西？）
题目:实现一个自动生成小学四则运算题目的命令行程序 github地址:https://github.com/ILTHEW/wc.git 主编:黄晖朝3116005178 助手:朱健栋311600520 ...
- Java容器——List接口
1. 定义 List是Collection的子接口,元素有序并且可以重复,表示线性表. 2. 常用实现类 ArrayList:它为元素提供了下标,可以看作长度可变的数组,为顺序线性表. LinkedL ...