百威
- 浏览: 692676 次
- 来自: ...
-
文章分类
最新评论
-
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 1260carousel-finish.html <!do ... -
Bootstrap折叠内容
2017-11-27 17:17 1505collapse-finish.html <!do ... -
Bootstrap工具提示
2017-11-27 17:17 1249tooltips-and-popovers-finish.ht ... -
Bootstrap对话框
2017-11-22 23:53 465modals-finish.html <!docty ... -
Bootstrap缩略图
2017-11-22 23:46 410thumbnails-finish.html <!d ... -
Bootstrap提示信息
2017-11-22 23:51 416alert-finish.html <!doctyp ... -
Bootstrap导航路径与分离器
2017-11-22 23:44 452breadcrumbs-and-pagination-fini ... -
Bootstrap选项卡
2017-11-22 23:42 449tab-finish.html <!doctype ... -
Bootstrap导航菜单的响应式设计
2017-11-11 23:07 521responsive-nav-finish.html &l ... -
Bootstrap导航菜单的响应式设计
2017-11-11 23:07 41responsive-nav-finish.html &l ... -
Bootstrap导航菜单里的下拉菜单
2017-11-01 23:12 457dropdown-nav-finish.html < ... -
Bootstrap导航菜单
2017-10-31 00:01 365<!doctype html> <ht ... -
Bootstrap带下拉菜单的按钮
2017-10-27 23:45 402dropdown-button-finish.html ... -
Bootstrap按钮群组
2017-10-27 23:33 387button-group-finish.html < ... -
Bootstrap按钮
2017-10-27 23:32 348button-finish.html <!doct ... -
Bootstrap表单排版
2017-10-25 23:51 324form-layout-finish.html <! ... -
Bootstrap选择列表
2017-10-25 23:43 342select-finish.html <!docty ... -
Bootstrap复选框
2017-10-18 23:43 443checkbox-finish.html <!doc ... -
Bootstrap单选按钮
2017-10-18 23:30 642radio-finish.html <!doctyp ...
相关推荐
主要介绍了bootstrap实现的自适应页面简单应用,结合具体实例形式分析了基于bootstrap的列表布局结构页面实现与使用技巧,需要的朋友可以参考下
bootstrap的整套框架的html静态页面示例集合，包括所有bootstrap控件及样式，是辅助开发的好资料，绝对不坑，物有所值。
基于Maven构建，框架使用现在主流的：SpringMVC（4.1）+Spring（4.1）+MyBatis（3.4.0），实现基本增删改查，页面国际化。数据源采用阿里开源的Druid，前端采用基于Bootstrap封装的模板AdminLTE（2.3.6）及Bootstrap...
本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考，具体如下： Bootstrap有自定义的验证码样式，在前端页面可以直接使用，他的css、js在使用前要在开头引入 上代码： <!DOCTYPE ...
spring-boot2.0 thymeleaf bootstrap 整合的一个示例项目，使用idea开发。步骤如下： 首先在idea或者eclipse(STS)中新建springboot项目，在选择依赖（Dependences）时引入web和thymeleaf。 接着我们将新建需要用到的...
bootstrap常用的一些应用示例,这些示例使用很简单，上手容易，包含了一些bootstrap使用的最多的功能，如：表单美化，弹出层，消息框，页面布局等...
引导功能： 响应式菜单响应式布局响应式表CSS 悬停效果构建状态/历史v.1 基本布局完成示例页面问题/变更请求 添加额外的 Bootstrap 模块 转换表以使用 JSON 添加表格过滤器 开发更好的table方法来适应小屏幕技术/...
多表布局示例 100% Html 响应页面 带分页和排序的数据表 不同类型的表单布局 验证表格 范围滑块 表单向导 发票页面 用户资料页面 不同类型的通知和甜蜜警报 登录/注册页面 动画模型 兼容小、中、大屏幕 动态和静态小...
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。博文网址：https://blog.csdn.net/LawrenceUyi31?type=blog
– Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 –> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!– 由于Bootstrap 3是移动设备优先...
bootstrap笔记（每一个知识点都有单独的示例）非常全，容易上手，学习bootstrap的利器
JasnyBootstrap页面操作的的简单实例，可实现固定格式的文本。
安装 安装bootstrap命令如下： npm install bootstrap --save 安装后可能报告如下错误： npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none...页面引入bootstrap的css和js文件如下： <
3 Bootstrap优秀网站示例 本章总结 本章作业 第2章 Bootstrap布局 1 Bootstrap的结构 1.1 使用栅格系统 1.1.1 绘制栅格 1.1.2 栅格系统的列偏移 操作案例1：制作音乐网站首页 1.1.3 栅格系统的列交换 1.1.4 栅格系统...
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。
BootstrapExample 使用HTML / CSS和Bootstrap创建的登陆页面示例，用于模仿Tinder应用程序 创建于：Atom Text Editor上HTML5，CSS，Bootstrap 4 选择Index.html作为主页
学生申请页面示例 所有课程目录 面向非付费学生的“公共视图”页面 付费课程的“私人接受课程”页面 具有订阅状态，近期课程，学生奖励，测验成绩和论坛活动的学生仪表板 进入测验页面，侧边栏提供测验问题，测验...
关于BootStrap和Vue.js的学习资料，包含项目引用BootStrap的工具包以及Vue.js的静态页面示例