bootstrap一个小案例_bootstrap前端模板资源-CSDN文库

共34个文件

jpg：17个

css：4个

js：4个

bootstrap

javascript

需积分: 12 176 浏览量 2018-08-16 10:58:39 上传评论收藏 4.97MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

BootstrapCase.zip （34个子文件）

css

bootstrap-theme.css 15KB

bootstrap.css.map 240KB

bootstrap.min.css 98KB

bootstrap.css 118KB

bootstrap-theme.min.css 13KB

bootstrap-theme.css.map 37KB

images

safari-big.jpg 85KB

2.jpg 87KB

ie-big.jpg 32KB

1.jpg 81KB

opera-logo.jpg 30KB

3.jpg 165KB

logo.psd 3.49MB

opera-big.jpg 889KB

safari-logo.jpg 56KB

ie-logo.jpg 27KB

4.jpg 87KB

safari-logo-small.jpg 10KB

firefox-logo.jpg 44KB

chrome-logo-small.jpg 7KB

chrome-logo.jpg 25KB

firefox-big.jpg 238KB

chrome-big.jpg 57KB

firefox-logo-small.jpg 10KB

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 61KB

index.html 15KB

html5shiv.js 2KB

respond.min.js 4KB

jquery-1.11.1.min.js 94KB

bootstrap.min.js 28KB

jquery-1.11.1.min.map 138KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>index</title> <link href="css/bootstrap.min.css" rel="stylesheet">  <style> body{ padding-top: 50px; padding-bottom: 50px; } /*轮播广告*/ .carousel{ height: 500px; margin-bottom: 60px; } .carousel .item{ height: 500px; background-color: #000; } .carousel .item img{ width: 100%; } .carousel-caption{ z-index: 10; } .carousel-caption p{ margin-bottom: 20px; font-size: 20px; line-height: 1.8; } /*简介*/ .summary{ padding-left: 15px; padding-right: 15px; } .summary .col-md-4 { margin-bottom: 20px; text-align: center; } hr.feature-divider{ margin: 40px 0; } /*特性*/ .feature{ padding: 30px 0; } .feature-heading{ font-size: 50px; color: #2a6496; } .feature-heading .text-muted { font-size: 28px; } /* 响应式布局 */ @media (max-width: 768px) { .summary { padding-right: 3px; padding-left: 3px; } .carousel { height: 300px; margin-bottom: 30px; } .carousel .item { height: 300px; } .carousel img { min-height: 300px; } .carousel-caption p { font-size: 16px; line-height: 1.4; } .feature-heading { font-size: 34px; } .feature-heading .text-muted { font-size: 22px; } } @media (min-width: 992px) { .feature-heading { margin-top: 120px; } } </style> </head> <body>  <nav class="navbar navbar-inverse navbar-fixed-top" id="menu-nav"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</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="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#ad-carousel">综述</a></li> <li><a href="#summary-container">简述</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li> <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li> <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li> <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li> <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li> </ul> </li> <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li> </ul> </div> </div> </nav>  <div class="carousel slide" id="ad-carousel" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#ad-carousel" data-slide-to="0" class="active"></li> <li data-target="#ad-carousel" data-slide-to="1"></li> <li data-target="#ad-carousel" data-slide-to="2"></li> <li data-target="#ad-carousel" data-slide-to="3"></li> <li data-target="#ad-carousel" data-slide-to="4"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide"> <div class="container"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide"> <div class="container"> <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/safari-big.jpg" alt="3 slide"> <div class="container"> <div class="carousel-caption"> <h1>Safari</h1> <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/opera-big.jpg" alt="4 slide"> <div class="container"> <div class="carousel-caption"> <h1>Opera</h1> <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/ie-big.jpg" alt="5 slide"> <div class="container"> <div class="carousel-caption"> <h1>IE</h1> <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> </div>  <a class="left carousel-control" href="#ad-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一张</span> </a> <a class="right carousel-control" href="#ad-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一张</span> </a> </div> <div class="container summary">  <div class="row" id="summary-container"> <div class="col-md-4"> <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome"> <h2>Chrome</h2> <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览�

评论收藏

内容反馈