<!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是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式、移动优先的...配合《BootStrap实战》随书源码第3章的实例，动手实践是巩固理论知识的最佳方式。
在第8章“输入框和导航组件”中，我们将深入探讨Bootstrap如何处理表单元素和导航结构，这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件（Form Controls）为创建美观且功能...
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您...
#### 四、创建第一个页面 下面是一个简单的示例，展示如何在HTML5页面中引入Bootstrap并创建一个按钮： ```html <!DOCTYPE html> <title>Bootstrap介绍 <link rel="stylesheet" href="css/bootstrap.min.css...
在第16章中，我们将聚焦于Bootstrap的弹出框（Popover）和警告框（Alert）插件，这两个组件在网页交互中扮演着重要角色。 首先，让我们深入了解Bootstrap的弹出框。弹出框主要用于展示额外的信息，当用户对某个元素...
总结来说，Bootstrap第二十五章的案例旨在帮助开发者深入理解和应用Bootstrap框架，包括但不限于网格系统、预定义样式、导航条、模态框、下拉菜单以及源码的定制。通过这些案例，你可以提升自己的前端开发技能，快速...
bootstrap
Bootstrap，由Twitter开发，是一款广泛应用于前端开发的开源框架，以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本，提供了丰富的组件、响应式设计以及易于定制的样式，旨在帮助开发者...
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
Bootstrap Icons：Bootstrap 有史以来第一次拥有自己的图标库，并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap Icons ...
Bootstrap是一种统计方法，主要用于处理小样本数据，通过模拟和重抽样的方式来估计统计量的分布，进而推断参数的置信区间或进行假设检验。这个压缩包`bootstrap.zip`包含了一系列与Bootstrap方法相关的MATLAB代码，...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了一套完整的工具集，用于快速构建响应式、移动优先的网页项目。在本章中，我们将深入探讨Bootstrap的基本概念、核心特性以及如何有效地使用它来提升网站...
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。"Bootstrap布局设计器"是一个专门用于创建和编辑Bootstrap布局的工具，它可以...
二、Bootstrap 组件介绍 Bootstrap 提供了一些常用的组件，例如 Navbar、Carousel、Alert、Badge、Breadcrumb 等。这些组件可以快速构建 Web 应用程序的用户界面。 在本文档中，我们可以看到 Bootstrap 的一些组件...
Bootstrap4 是在 2015 年也就是 Bootstrap 四周年之际推出的新的前端框架，在 Bootstrap3 的基础上，对 Bootstrap 做出了一些相应的改变。 Bootstrap 下载和引入 Bootstrap 提供了三种下载的样式生产环境开发包：...
Bootstrap是世界上最受欢迎的前端开发框架，它为创建响应式、移动优先的网站提供了一套强大的工具。Bootstrap3.3.5是该框架的一个稳定版本，它优化了对各种设备的适应性，使得开发者能够轻松地构建一致且美观的界面...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面...