<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; color: #666; } .jumbotron { background-image: url(img/bg.jpg); margin: 50px 0 0 0; color: #ccc; } .jumbotron h1 { font-size: 26px; padding: 0 0 0 20px; } .jumbotron h4 { font-size: 15px; padding: 0 0 0 20px; } #information { background-color: #eee; padding: 40px 0; } .info-content { background-color: #fff; margin: 0 0 20px 0; box-shadow: 2px 2px 3px #ccc; } .info-content img { margin: 12px 0; } .info-content h4 { color: #333; padding: 2px 0 0 0; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .info-content p { line-height: 1.6; } .info-right { background-color: #fff; box-shadow: 2px 2px 3px #ccc; } .info-right blockquote { margin: 0; padding: 0; } .info-right h2 { font-size: 20px; color: #333; padding: 5px; } .info-right h4 { color: #333; font-size: 16px; padding: 2px 0 0 0; line-height: 1.6; } #footer { background-color: #666; border-top: 1px solid #ccc; padding: 20px; text-align: center; color: #eee; } /*没有小于768px,是因为Bootstrap3以移动端优先设计*/ /* 小屏幕(平板,大于等于768px) */ @media (min-width: 768px) { .jumbotron h1 { font-size: 30px; } .jumbotron h4 { font-size: 16px; } .info-content h4 { font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /* 中等屏幕(桌面显示器,大于等于992px) */ @media (min-width: 992px) { .jumbotron h1 { font-size: 33px; } .jumbotron h4 { font-size: 17px; } .info-content h4 { font-size: 18px; } } /* 大屏幕(大桌面显示器,大于等于1200px) */ @media (min-width: 1200px) { .jumbotron h1 { font-size: 36px; } .jumbotron h4 { font-size: 18px; } .info-content h4 { font-size: 20px; } } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="padding: 0;"><img src="img/logo.png" alt="标志"></a> <button type="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> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top: 0;"> <li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>一站式共享网络</h1> <h4>阅谁问君诵,水落清香浮。</h4> </hgroup> </div> </div> <div id="information"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="container-fluid" style="padding:0;"> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>阅谁问君诵,水落清香浮。</h4> <p class="hidden-xs">...</p> <p>onestopweb 16 / 01 / 16</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>阅谁问君诵,水落清香浮。</h4> <p class="hidden-xs">...</p> <p>onestopweb 16 / 01 / 16</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>阅谁问君诵,水落清香浮。</h4> <p class="hidden-xs">...</p> <p>onestopweb 16 / 01 / 16</p> </div> </div> </div> </div> <div class="col-md-4 info-right hidden-xs hidden-sm"> <blockquote> <h2>热门资讯</h2> </blockquote> <div class="container-fluid"> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>阅谁问君诵,水落清香浮。</h4> <p>onestopweb 16 / 01 / 16</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>阅谁问君诵,水落清香浮。</h4> <p>onestopweb 16 / 01 / 16</p> </div> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>分享最有用的资料,为用户建最有体验度的网站</p> <p>互联网知识共享资料 版权所有 粤ICP备15052347号</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
《BootStrap实战》随书源码第3章.rar
第1章 Bootstrap介绍
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
《响应式网页开发实战》教学教案—第14章 Bootstrap样式.pdf《响应式网页开发实战》教学教案—第14章 Bootstrap样式.pdf《响应式网页开发实战》教学教案—第14章 Bootstrap样式.pdf《响应式网页开发实战》教学教案—...
NULL 博文链接:https://onestopweb.iteye.com/blog/2266727
Bootstrap5 图标库 bootstrap-icons
bootstrap
《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—...
包括bootstrap官方文档和bootstrap-table,其中bootstrap-table是在git下载下来的
NULL 博文链接:https://onestopweb.iteye.com/blog/2266379
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
bootstrap-switch bootstrap 开关
Bootstrap视频网站模板
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
NULL 博文链接:https://onestopweb.iteye.com/blog/2268116
Bootstrap (Web框架 可用) Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的...
Bootstrap Responsive Web Dev with Bootstrap Bootstrap Responsive Web Dev with Bootstrap
资源名称:Bootstrap期末课程设计 内容使用语言:HTML5+css3+js+bootstrap框架 使用/学习场景:完成整个学期成果,了解框架的好处 应用场景:对于使用框架对于完成一个网页的实现更加容易 特点:加深对前端语言的...
bootstrap布局设计器