bootstrap首页案例

最新推荐文章于 2024-01-10 22:14:58 发布
最新推荐文章于 2024-01-10 22:14:58 发布
阅读量372 收藏
点赞数
文章标签： javascript 前端 php ViewUI
原文链接：http://www.cnblogs.com/hgj123/p/5241951.html
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bootstrap项目实战</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/wow.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.css" />
</head>
<body>

<!--导航模块开始-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕时候的按钮-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand color-a">LOL大神学院</a>
</div>

<!--结束-->
<!--导航开始-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="#bbs">鲁友论坛</a></li>
<li><a href="#html5">活动报名</a></li>
<li><a href="#bootsrtap">搞笑视频</a></li>
<li><a href="#list">比赛直播</a></li>
<li><a href="#app">App下载</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<!--导航结束-->
</div>
</nav>
<!--导航模块结束-->

<!--首页内容模块开始-->
<section id="home">
<div class="lvjing">
<div class="container" >
<div class="row wow bounce fadeInUp media-top-div" data-wow-duration="1s" data-wow-delay="1s">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1>英雄联盟S4赛季</h1>
<p>比赛分四个阶段进行:1.海选赛 2.预选赛 3.晋级赛 4.全国决赛<br/>
奖励规则:1.1000万RBM(冠军) 2.500万RBM(亚军) 3.300万RBM(季军)
</p>
<img src="images/php.jpg" class="img-responsive" alt="lol大赛"/>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</section>
<!--首页内容模块结束-->

<section id="bbs">
<div class="container">
<div class="row wow flipInY" data-wow-offset="10" data-wow-duration="2s" data-wow-delay="1s">
<div class="col-md-4">
<a href="#">
<img src="images/a.png" class="img-responsive" />
<h3>Android在线视频播放下载</h3>
<p>累计下载1039万次</p>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img src="images/i.png" class="img-responsive" />
<h3>IOS在线视频播放下载</h3>
<p>累计下载705万次</p>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img src="images/b.png" class="img-responsive" />
<h3>平板在线视频播放下载</h3>
<p>累计下载458万次</p>
</a>
</div>
</div>
</div>
</section>
<!--
作者：offline
时间：2016-03-02
描述：html5
-->
<section id="html5">
<div class="container">
<div class="col-md-6 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<h2>HTML5前端开发</h2>
<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
<p><span class="glyphicon glyphicon-grain mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
<p><span class="glyphicon glyphicon-grain mai-icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>

</div>
<div class="col-md-6 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<img src="images/html5.jpg" class="img-responsive" />
</div>
</div>
</section>
<!--
作者：offline
时间：2016-03-03
描述：bootstrap区域
-->
<section id="bootstrap">
<div class="container">
<div class="col-md-6 wow zoomInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10" >
<img src="images/Bootstrap.jpg" class="img-responsive" />
</div>
<div class="col-md-6 wow zoomInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<h2>BOOTSTRAP前端开发</h2>
<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
<p><span class="glyphicon glyphicon-grain mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
<p><span class="glyphicon glyphicon-grain mai-icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>

</div>

</div>
</section>

<!--
作者：offline
时间：2016-03-03
描述：列表页
-->
<section id="list">
<div class="container">
<div class="row ">
<div class="col-md-12 wow wobble" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<h2>最新课程</h2>
</div>
<div class="col-md-3 wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s" >
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow jello" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow bounce" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow lightSpeedIn" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow rubberBand" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive"/>
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow lightSpeedIn" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow jello" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
<div class="col-md-3 wow rubberBand" data-wow-duration="1s" data-wow-delay="1s">
<div class="list_div">
<img src="images/swift.jpg" class="img-responsive" />
<a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a>
</div>
</div>
</div>
</div>
</section>
<!--
作者：offline
时间：2016-03-03
描述：app
-->
<section id="app">
<div class="container">
<div class="row">
<div class="col-md-6 wow slideInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<h2>LOL APP讨论社区下载</h2>
<p>
全球5000W撸友互动，与新网站数据同步，更加丰富的视频，开启精彩无限，语音搜索视频，喊出你想要的比赛视频，一件收藏，方便自己重复看，离线下载比赛视频，在哪儿都能看！
</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 wow slideInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<img src="images/app-banner.jpg" class="img-responsive" alt=""/>
</div>
</div>
</div>
</section>
<!--
作者：offline
时间：2016-03-03
描述：联系我们区域
-->
<section id="contact">
<div class="lvjing">
<div class="container">
<div class="row">
<div class="col-md-6 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<h2>
<span class="glyphicon glyphicon-send"></span>
&nbsp;联系小麦
</h2>
<p>
麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
</p>
<address>
<p>
<span class="glyphicon glyphicon-home"></span>
&nbsp;地址:成都市高新区天府软件园D5-11
</p>
<p>
<span class="glyphicon glyphicon-phone-alt"></span>
&nbsp;联系电话：028-86567913
</p>
<p>
<span class="glyphicon glyphicon-envelope"></span>
&nbsp;邮箱:hr@maiziedu.com
</p>
</address>
</div>
<div class="col-md-6 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10">
<form action="#" method="post">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="您的姓名"/>
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="您的邮箱"/>
</div>
<div class="col-md-12">
<input type="text" class="form-control" placeholder="标题"/>
</div>
<div class="col-md-12">
<textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
</div>
<div class="col-md-8">
<input type="submit" class="form-control" value="提交"/>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--
作者：offline
时间：2016-03-04
描述：底部
-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;www.maiziedu.com&nbsp;&nbsp;蜀ICP备13014270号-4
</p>
</div>
</div>
</div>
</footer>
<script>
$(function(){
//导航慢慢定位(跳转插件)
$(".nav").singlePageNav({
offset:70 //移出覆盖导航的高度
});
/**
* 小屏幕导航点击就关闭按钮
*/
$(".navbar-collapse a").click(function(){
$(".navbar-collapse").collapse("hide");
});
//动画初始化
new WOW().init();

});
</script>
</body>
</html>

 


<!--
(1)sublime编辑器的安装html
http://www.haorooms.com/post/sublime_use
(2)sublimt编辑器快速编写html
http://www.haorooms.com/post/emmet_s
(3)生成html快捷键盘 输入!号，在按住ctrl+E 就可以生成！
-->
<!--
《笔记》
(1)bootstrap官网:bootcss.com
(2)引入百度cnd的JQ文件：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
(3)思维导图xmind下载：http://jstel.ddooo.com:8081/uuauth/XMindPro_61977.rar?9c87223b200e7daf74ebedf88be8ee5c.rar
(4)IE8开启标准渲染模式：<meta http-equiv="X-UA-Compatible" content="IE=edge">
(5)配置视窗口：<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
参数解释:<1>width=device-width(当前页面的宽度等于当前设备的宽度)
<2>initial-scale=1(缩放的比例为1:1)
<3>user-scalable=no(是否允许用户手动缩放)
(6)动画插件
1.jquery.singlePageNav.min.js(单页面导航插件)
2.初始化
//导航慢慢定位(跳转插件)
$(".nav").singlePageNav({
offset:70 //移出覆盖导航的高度
});
---------------------------------
1.wow.min.js (动画插件js) animate.css(动画效果)
2.data-wow-duration="2s" (动画持续时间)
3.data-wow-delay="5s" (动画延迟时间)
4.data-wow-offset="10" (距离可视区域多远开始执行动画)
5.data-wow-iteration="10" (重复次数)
6.动画效果网址:http://daneden.github.io/animate.css/
7.在某个具体的html标签中必须先加class="wow 然后在加显示具体的效果"
8.插件初始化 new WOW().init();
-->

转载于:https://www.cnblogs.com/hgj123/p/5241951.html

dianchamian8747
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap入门案例.zip
10-11
BootStrap入门案例.zip
bootstrap实用案例1.rar
04-15
bootstrap4精选最实用的案例1
bootstrap4案例
12-10
找了很久找不到合适到bootstrap的案例，自己写了一个综合一点到案例，适合基础知识学完了，想简单练练手的，内容和组件大部分包含在里面了，也适合教师做教学用。
bootstrap案例
08-12
bootstrap经典实用案例 - Responsive Design, support any PC or MAC systems, phones and tablets - Integrated charts (jQuery Flot and jQuery Peity) - Dynamic tables (jQuery DataTables) - Full featured calendar (jQuery FullCalendar) - jQuery 1.7.2 - jQuery UI 1.10.0 - Bootstrap 2.3 - Colorpicker for Bootstrap - Datepicker for Bootstrap - Form Wizards (jQuery Wizard) - Support Chat - example page - jQuery Chosen - jQuery Uniform - 3 color styles - Growl-like notifications (jQuery Gritter) - Valid HTML5 pages - Includes documentation
基于Bootstrap的旅游官网页面实例
05-25
基于Bootstrap做的旅游官网实例，使用到轮播图等，很实用，资源中不仅包含源码，还有引用的所有图片资源，可以直接使用。
bootstrap搭建一个简单的官网案例附代码
最新发布
.
01-10 1018
bootstrap搭建一个简单的官网案例附代码
Bootstrap实战 - 瀑布流布局
后除
12-05 3651
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。
Bootstrap案列:首页界面
zyz博客
02-07 1335
在自学Bootstrap之后我开始完成一个旅游网项目的首页界面，本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <sc...
favicon.ico在线制作
大强博客
07-14 7949
http://www.faviconico.org/favicon
BootStrap的介绍与案例使用
苏凯的博客
09-06 1万+
BootStrap的介绍与案例使用 1.案例一:使用Bootstrap重写网站首页 1.1案例介绍 本案例使用Bootstrap重写首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。 1.2案例相关技术 1.2.1Boo...
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
bootstrap案例 inter官网首页
05-25
初学bootstrap时一个很好不错的demo，
bootstrap实用案例3.rar
04-15
bootstrap4精选几个实用案例,绝不坑人
bootstrap经典实用案例
12-21
bootstrap经典实用案例.rar bootstrap经典实用案例.rar
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
Bootstrap部分案例
m0_61148761的博客
04-03 2781
主要用于组件：媒体对象-Media object代码如下效果如下主要用于页面内容：表格-Table代码如下效果如下主要用于组件：模态框-Modal代码如下效果如下：（点击结算弹出）扩展内容-图标代码如下效果如下折叠 滚动监听 下拉菜单 分页导航-面包屑导航 等等（需要留下印象）页面中引入库 ① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
bootstrap实现分页（实例）
热门推荐
红岸基地
03-20 10万+
写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，...
bootstrap经典实用案例.
11-20
bootstrap经典实用案例，bootstrap经典实用案例，bootstrap经典实用案例
flask bootstrap 详细案例
04-20
好的，我可以回答这个问题。Flask Bootstrap 是一个基于 Twitter Bootstrap 的 Flask 扩展，可以快速构建漂亮的 Web 应用程序。下面是一个简单的 Flask Bootstrap 案例： 1. 安装 Flask Bootstrap ``` pip install flask-bootstrap ``` 2. 在 Flask 应用程序中导入 Bootstrap ``` from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app) ``` 3. 创建一个简单的页面 ``` @app.route('/') def index(): return render_template('index.html') ``` 4. 创建一个 HTML 模板，使用 Bootstrap 样式 ``` {% extends 'bootstrap/base.html' %} {% block title %}My First Flask Bootstrap App{% endblock %} {% block content %} <div class="container"> <h1>Welcome to my app!</h1> <p>This is my first Flask Bootstrap app.</p> </div> {% endblock %} ``` 这个简单的 Flask Bootstrap 案例演示了如何在 Flask 应用程序中使用 Bootstrap 样式来创建页面。希望这个案例可以帮助你入门 Flask Bootstrap。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值