百威
- 浏览: 707322 次
- 来自: ...
-
文章分类
最新评论
-
ranguisheng：
可以加点注释,代码不便于阅读.
用java实现数据库连接池的一个简单示例 -
abcd880129：
这样写的话，还要用专门的下载工具，不然，只能下到一个为空的ex ...
ZK下载文件时,不在服务器生成文件直接下载 -
234369425：
同上，是20
java计算阶乘 -
CodeToMyLaw：
如果目录中含有中文呢？
[^\x00-\xff] 中文的 ...
js验证文件目录格式的正确性 -
yanzhoupuzhang：
加了，还是报那个错误！
org.apache.commons.dbcp.BasicDataSource的解决方法
参照视频做的页面
index.html
article.html
style.css
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="description" content="凤凰社是一个分享感动的地方">
<title>凤凰社</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/fenikso.js"></script>
</head>
<body>
<!-- 页头分为两部分 -->
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#" title="回到首页">
<img id="logo" src="images/logo.png" alt="凤凰社">
</a>
</div>
<div class="span6">
<div class="input-append pull-right" id="search">
<input class="span3" id="searchText" type="text">
<button class="btn" type="button">搜索</button>
</div>
</div>
</div>
</div>
</header>
<!-- 导航菜单 -->
<nav id="navigation">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
真实婚礼
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">后院婚礼</a></li>
<li><a href="#">复古婚礼</a></li>
<li><a href="#">农场婚礼</a></li>
</ul>
</li>
<li><a href="#">活动</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主内容列表块 -->
<div class="main-content">
<div class="container">
<div class="thumbnails">
<article class="span6">
<div class="media-box">
<img src="content/1.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
<article class="span6">
<div class="media-box">
<img src="content/2.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
<article class="span6">
<div class="media-box">
<img src="content/3.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
<article class="span6">
<div class="media-box">
<img src="content/4.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
<article class="span6">
<div class="media-box">
<img src="content/5.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
<article class="span6">
<div class="media-box">
<img src="content/6.jpg" alt="婚礼图片">
</div>
<div class="content-box">
<h1>内容块一的标题</h1>
<footer class="content-meta">
<span >
<a href="#" rel="tooltip" data-placement="left" data-original-title="王皓">
<img class="img-circle" src="content/avatar.jpg" alt="">
</a>
</span>
<time>2017-12-16</time>
<span>农场婚礼</span>
<div class="btn-group">
<a href="#" class="btn btn-mini" rel="popover" data-original-title="摘要" data-content="一个温馨可爱的农场婚礼"
data-placement="top" data-trigger="hover"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-mini"><i class="icon-comment"></i></a>
</div>
</footer>
</div>
</article>
</div><!-- end thumbnails -->
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
<i class="icon-bow"></i>
</div>
</div>
</div>
<!--底部边栏-->
<aside id="bottom">
<div class="semicircle">
<div class="container">
<div class="row">
<div class="span4">
<section>
<div class="dashed-v">
<h3><span>底部内容区块一</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
<div class="span4">
<section>
<div class="dashed-v">
<h3><span>底部内容区块二</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
<div class="span4">
<section>
<div>
<h3><span>底部内容区块三</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
</div>
</div>
</div>
</aside>
<!--页脚部分-->
<footer id="footer">
<div class="container">
© 2013 凤凰社
</div>
</footer>
</body>
</html>
article.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="description" content="凤凰社是一个分享感动的地方">
<title>凤凰社</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/fenikso.js"></script>
</head>
<body>
<!-- 页头分为两部分 -->
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#" title="回到首页">
<img id="logo" src="images/logo.png" alt="凤凰社">
</a>
</div>
<div class="span6">
<div class="input-append pull-right" id="search">
<input class="span3" id="searchText" type="text">
<button class="btn" type="button">搜索</button>
</div>
</div>
</div>
</div>
</header>
<!-- 导航菜单 -->
<nav id="navigation">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
真实婚礼
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">后院婚礼</a></li>
<li><a href="#">复古婚礼</a></li>
<li><a href="#">农场婚礼</a></li>
</ul>
</li>
<li><a href="#">活动</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主内容列表块 -->
<div class="main-content">
<div class="container">
<div class="row">
<div class="span8">
<h1 class="article-title">内容的大标题</h1>
<footer class="content-meta">
<time><i class="icon-calendar"></i> 2013-01-12</time>
<span><i class="icon-book"></i> 农场婚礼</span>
<span><i class="icon-tags"></i> 秋天</span>
<span><i class="icon-comment"></i>3</span>
</footer>
<div id="content">
<img src="content/3.jpg" alt="">
<p>爱晴约晖
有晴人终于相晖
因为爱晴，约晖今生。
美丽约晖，晴有独钟。
晖心一笑，晴真意切。
两晴相悦，晖爱一生。
爱的晖眸，一见钟晴。
</p>
</div>
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
<i class="icon-bow"></i>
<section id="comments">
<h2>内容评论 <span class="label label-important">3</span></h2>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="content/avatar.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">小王 <small><time>2013-01-12 上午</time></small></h4>
两晴相悦，晖爱一生。 爱的晖眸，一见钟晴。
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="content/avatar.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">小王 <small><time>2013-01-12 上午</time></small></h4>
两晴相悦，晖爱一生。 爱的晖眸，一见钟晴。
</div>
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="content/avatar.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">王皓 <small><time>2013-01-12 上午</time></small></h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</div>
</div>
</section>
</div>
<div class="span4">
<aside id="sidebar-right">
<section>
<div class="title-line">
<h3>右边栏区块一</h3>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
</section>
</aside>
</div>
</div>
</div>
</div>
</div>
<!--底部边栏-->
<aside id="bottom">
<div class="semicircle">
<div class="container">
<div class="row">
<div class="span4">
<section>
<div class="dashed-v">
<h3><span>底部内容区块一</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
<div class="span4">
<section>
<div class="dashed-v">
<h3><span>底部内容区块二</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
<div class="span4">
<section>
<div>
<h3><span>底部内容区块三</span></h3>
<p>这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易</p>
</div>
</section>
</div>
</div>
</div>
</div>
</aside>
<!--页脚部分-->
<footer id="footer">
<div class="container">
© 2013 凤凰社
</div>
</footer>
</body>
</html>
style.css
@CHARSET "UTF-8";
/*
* 页头部分的样式
*/
#logo,#search{
padding: 30px 0;
}
/*
* 导航菜单的样式
*/
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-bottom: 3px solid #009571;
}
#navigation{
border-bottom: 1px solid #d7d7d7;
}
/*
* 主内容的样式
*/
.content-box{
border: 1px solid #d7d7d7;
border-top: none;
padding: 10px;
margin-bottom: 20px;
}
.content-box h1{
font-size: 15px;
line-height: 30px;
margin-top: 0;
}
.content-meta span,
.content-meta time{
margin-right: 10px;
color: #828282;
}
.content-meta img{
width: 32px;
}
#main-content{
margin: 20px 0;
}
.media-box{
height: 260px;
overflow: hidden;
}
.breadcrumb{
background-color: #fff;
border-bottom: 1px solid #d7d7d7;
}
.icon-bow{
display: block;
width: 32px;
height: 21px;
background: #fff url(images/bow.png) no-repeat 50% 50%;
margin: 0 auto;
margin-top: -30px;
padding: 0 10px;
}
/*
底部边栏样式
*/
#bottom{
background: #009571 url(images/emerald.png);
color: #fff;
text-shadow: 1px 1px 1px #048465;
}
.semicircle{
background: url(images/semicircle.png) repeat-x;
padding: 20px 0;
}
#bottom h3{
font-size: 18px;
color: #075442;
text-shadow: 1px 1px 1px #03a67f;
background: url(images/dashed-h.png) repeat-x 0 50%;
}
#bottom h3 span{
background: url(images/emerald.png);
padding-right: 10px;
}
.dashed-v{
background: url(images/dashed-v.png) repeat-y 100% 0;
padding: 0 20px 20px 0;
}
/*页脚部分样式*/
#footer{
background: url(images/emerald-footer.png) repeat-x #097a5f;
padding: 30px 0 20px 0;
color: #064536;
text-shadow: 1px 1px 1px #009571;
}
/*文章内容的样式**/
.article-title{
margin-bottom: 30px;
}
#content{
margin: 20px 0;
}
#content img{
margin-bottom: 5px;
}
/*评论的样式*/
#comments h2{
font-size: 18px;
}
#comments .media{
margin-bottom: 20px;
}
/*右边栏样式*/
.title-line{
border-bottom: 1px solid #e8e8e8;
margin-bottom: 30px;
}
.title-line h3{
font-size: 18px;
line-height: 1;
position: relative;
bottom: -13px;
background: #fff;
display: inline;
padding-right: 15px;
}
- BootsrapDemo2.zip (585.1 KB)
- 下载次数: 0
分享到：
发表评论
-
Bootstrap时间选择器插件
2017-12-01 23:58 5dateRangePicker.html <!doc ... -
Bootstrap旋转木马
2017-11-27 17:17 1294carousel-finish.html <!do ... -
Bootstrap折叠内容
2017-11-27 17:17 1529collapse-finish.html <!do ... -
Bootstrap工具提示
2017-11-27 17:17 1279tooltips-and-popovers-finish.ht ... -
Bootstrap对话框
2017-11-22 23:53 516modals-finish.html <!docty ... -
Bootstrap缩略图
2017-11-22 23:46 443thumbnails-finish.html <!d ... -
Bootstrap提示信息
2017-11-22 23:51 451alert-finish.html <!doctyp ... -
Bootstrap导航路径与分离器
2017-11-22 23:44 487breadcrumbs-and-pagination-fini ... -
Bootstrap选项卡
2017-11-22 23:42 484tab-finish.html <!doctype ... -
Bootstrap导航菜单的响应式设计
2017-11-11 23:07 567responsive-nav-finish.html &l ... -
Bootstrap导航菜单的响应式设计
2017-11-11 23:07 41responsive-nav-finish.html &l ... -
Bootstrap导航菜单里的下拉菜单
2017-11-01 23:12 505dropdown-nav-finish.html < ... -
Bootstrap导航菜单
2017-10-31 00:01 398<!doctype html> <ht ... -
Bootstrap带下拉菜单的按钮
2017-10-27 23:45 433dropdown-button-finish.html ... -
Bootstrap按钮群组
2017-10-27 23:33 423button-group-finish.html < ... -
Bootstrap按钮
2017-10-27 23:32 391button-finish.html <!doct ... -
Bootstrap表单排版
2017-10-25 23:51 363form-layout-finish.html <! ... -
Bootstrap选择列表
2017-10-25 23:43 375select-finish.html <!docty ... -
Bootstrap复选框
2017-10-18 23:43 481checkbox-finish.html <!doc ... -
Bootstrap单选按钮
2017-10-18 23:30 678radio-finish.html <!doctyp ...
相关推荐
Bootstrap实现的自适应页面简单应用示例 在本文中，我们将详细介绍Bootstrap实现的自适应页面简单应用示例，结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先，让我们了解什么是...
- **栅格系统**：Bootstrap的栅格系统是构建布局的基础，它将页面划分为12列，通过类选择器可以控制元素占据的列数及其在不同屏幕尺寸下的显示方式。 - **导航条（Navbar）**：导航条是网站常见的组件，Bootstrap...
本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、treegrid（树形表格）以及与KnockoutJS的集成，这些都是在实际开发中非常实用的场景。 1. **BootstrapTable基本使用** BootstrapTable的核心...
首先，Bootstrap的核心特性在于其网格系统，它允许开发者通过简单的类名定义页面布局。这种12列的网格布局使得在不同设备上自适应显示变得容易，从而实现响应式设计。例如，你可以通过`.container`容器、`.row`行和`...
- **栅格系统**：Bootstrap的栅格系统基于12列的布局，允许开发者轻松创建响应式页面布局，自动调整在不同屏幕尺寸下的显示方式。 - **CSS样式**：包括全局CSS设置、字体排版、色彩方案、按钮、表单、表格、图像和...
只需要添加HTML结构和相应的Bootstrap类，就能快速搭建起一个功能齐全的页面。 9. **兼容性**：Bootstrap通常与现代浏览器兼容，包括Chrome、Firefox、Safari、Edge以及Internet Explorer 9及以上版本。 10. **...
接下来，我们来看一个简单的Bootstrap页面示例： ```html <!DOCTYPE html> <title>Bootstrap实战：网格系统 , initial-scale=1.0"/> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn....
在"Backbone 和 Bootstrap 登录示例项目"中，我们将学习以下关键知识点： 1. **Backbone.Model和Backbone.View** - **Backbone.Model**：在这个登录示例中，Model可能包含用户名和密码属性，用于存储用户的登录...
<title>Bootstrap 页面示例 <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"> ``` 接下来，我们可以创建页面的...
在“bootstrap页面.rar”这个压缩包中，包含了多个HTML文件，如agenda.html、baladin.html等，这些文件很可能是使用Bootstrap框架创建的网页模板或示例页面，展示了Bootstrap在实际项目中的应用。 1. **响应式设计*...
这个"bootstrap的整套框架的html静态页面示例集合"是学习和参考Bootstrap设计与功能的理想资源。下面我们将深入探讨这个集合中的主要知识点。 1. **Bootstrap简介**：Bootstrap是由Twitter开发的开源框架，它简化了...
在“bootstrap页面练习-4个完整页面--哈哈”这个压缩包中，你将找到一系列资源，帮助你深入理解和实践Bootstrap框架。 首先，我们有两个PPT文件：“bootstrap入门919.ppt”和“bootstrap924.ppt”。这些文件通常...
- **基本结构**：下面是一个简单的 Bootstrap 页面示例，展示了如何引入 Bootstrap 核心文件。 ```html <!DOCTYPE html> <title>Bootstrap 示例 <link rel="stylesheet" href="css/bootstrap.min.css"> ...
引入Bootstrap后，文件可能包含了Bootstrap的基础布局元素，如网格系统、导航条、按钮等，这些都是Bootstrap的核心特性，用于创建整洁、响应式的页面结构。 接下来是`demo1 modal bootstrap.html`。Modal是...
本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考，具体如下： Bootstrap有自定义的验证码样式，在前端页面可以直接使用，他的css、js在使用前要在开头引入 上代码： <!DOCTYPE ...
在WebApplication1这个项目中，你可能会看到一个基本的Jasny Bootstrap应用结构，包括引入必要的CSS和JavaScript文件，以及使用这些增强组件的示例代码。文件名可能代表了一个简单的Web应用程序，其中包含HTML、CSS...
总的来说，Bootstrap页面模板提供了一种快速启动新项目的方式，减少了重复设计工作，使开发者能够专注于业务逻辑和内容创建。利用Bootstrap的强大功能，你可以创建出专业、美观且响应式的网页，无论用户在何种设备上...
基于Maven构建，框架使用现在主流的：SpringMVC（4.1）+Spring（4.1）+MyBatis（3.4.0），实现基本增删改查，页面国际化。数据源采用阿里开源的Druid，前端采用基于Bootstrap封装的模板AdminLTE（2.3.6）及Bootstrap...