bootstrap搭建 spring
2016-12-23 18:27:04 weixin_34413103 阅读数 13

Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统 Demo

相关阅读:

1、Spring MVC+Hibernate JPA+ Bootstrap 搭建的博客系统项目中所遇到的坑

由于整个系统不是很难,这里就不详细介绍了,我相信看源码的话,应该能够看得懂。

如果觉得不错的话,欢迎给个 star , 如果你想完善这个项目的话,你也可以 fork 后修改然后推送给我。

源码地址:https://github.com/zhisheng17/springmvc

数据库springdemo.sql

下面给出下整个系统的截图吧,觉得不错,可以给个 star ,哈哈!后续继续在这个项目中加入新的项目。

截图:

首页

用户管理模块

  • 用户列表

  • 添加用户

  • 用户信息详情

  • 更新用户信息

  • 删除用户

博客管理模块

  • 博客列表

  • 博客详情

  • 添加博客

  • 更新博客

  • 删除博客

2019-05-02 18:22:21 pianai_s 阅读数 84

Bootstrap搭建网页

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
	href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
	rel="stylesheet">

<link
	href="<%=basePath%>/res/css/docs.min.css"
	rel="stylesheet">
<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script
	src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<title>首页</title>
</head>
<!-- data-spy="scroll" data-target="#nav-menu" data-offset="0"
滚动监听:href="#news"为原       id="news"为目标
 -->
<body data-spy="scroll" data-target="#nav-menu" data-offset="0">
	<!-- nav -->
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<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="#">@blog</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="nav-menu">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#g-pic">画廊 <span class="sr-only">(current)</span></a></li>
					<li><a href="#news">新闻</a></li>
					<li><a href="#footer">关于我们</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="info">info测试</a></li>
							<li><a href="details">details测试</a></li>
							<li><a href="help">帮助示例</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="edit">edit测试</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">One more separated link</a></li>
						</ul></li>
				</ul>
				
				<ul class="nav navbar-nav navbar-right">
				<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul></li>
					<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">搜索</button>
				</form>
				</ul>
			</div>
			<!-- /.navbar-collapse -->

			<!--  -->


			<!--  -->
		</div>
		<!-- /.container-fluid -->
	</nav>
<div class="" style="padding-top: 50px"></div>	

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="画廊" src="..." id="g-pic">
      </a>
    </div>
  </div>
</nav>

	<!-- 幻灯片 轮播图 -->
	<div class="container-fluid" >
		<div class="row">
		<!-- 上部分第一大部分 start -->
			<div class="col-md-9 column">
				<div class="carousel slide" id="carousel-37253">
					<ol class="carousel-indicators">
						<li data-slide-to="0" data-target="#carousel-37253" class="active"></li>
						<li data-slide-to="1" data-target="#carousel-37253"></li>
						<li data-slide-to="2" data-target="#carousel-37253">
						</li>
					</ol>
					<div class="carousel-inner">
						<div class="item">
							<img alt="" src="<%=basePath%>/res/images/5.jpg" />
							<div class="carousel-caption">
								<h4>First Thumbnail label</h4>
								<p>Cras justo odio, dapibus ac facilisis in, egestas eget
									quam. Donec id elit non mi porta gravida at eget metus. Nullam
									id dolor id nibh ultricies vehicula ut id elit.</p>
							</div>
						</div>
						<div class="item">
							<img alt="" src="<%=basePath%>/res/images/6.jpg" />
							<div class="carousel-caption">
								<h4>Second Thumbnail label</h4>
								<p>Cras justo odio, dapibus ac facilisis in, egestas eget
									quam. Donec id elit non mi porta gravida at eget metus. Nullam
									id dolor id nibh ultricies vehicula ut id elit.</p>
							</div>
						</div>
						<div class="item active">
							<img alt="" src="<%=basePath%>/res/images/7.jpg" />
							<div class="carousel-caption">
								<h4>Third Thumbnail label</h4>
								<p>Cras justo odio, dapibus ac facilisis in, egestas eget
									quam. Donec id elit non mi porta gravida at eget metus. Nullam
									id dolor id nibh ultricies vehicula ut id elit.</p>
							</div>
						</div>
					</div>
					<a class="left carousel-control" href="#carousel-37253"
						data-slide="prev"><span
						class="glyphicon glyphicon-chevron-left"></span></a> <a
						class="right carousel-control" href="#carousel-37253"
						data-slide="next"><span
						class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div><!-- 上部分第一大部分 end -->
			
          <!-- 上部分第二大部分 start -->
          
			<div class="col-md-3 column" id="">
			<!-- 搜索框 -->
		
				<div class="span4">
					<form class="form-inline">
						<div class="form-group">
							<label class="sr-only" for="exampleInputAmount">内容
								</label>
							<div class="input-group">
								<input type="text" class="form-control" id="exampleInputAmount"
									placeholder="在此输入内容">
							</div>
						</div>
						<button type="submit" class="btn btn-primary">搜索</button>
					</form></div>
					<div class=""style="padding-top: 10px"></div>
					
					
					
					
					<!-- 列表 start-->
					<div class="span4">
					<a href="#" class="list-group-item list-group-item-success">Java SE</a>
				     <a href="#" class="list-group-item list-group-item-info">JavaWeb</a> 
				     <a href="#" class="list-group-item list-group-item-warning">JavaEE框架</a> 
				     <a href="#" class="list-group-item list-group-item-danger">Spring</a>
					<a href="#" class="list-group-item list-group-item-info">SpringMVC</a> 
					<a href="#" class="list-group-item list-group-item-warning">Mybatis</a> 
					<a href="#" class="list-group-item list-group-item-danger">Hibernate</a>
					<a href="#" class="list-group-item list-group-item-info">MySQL</a> 
					<a href="#" class="list-group-item list-group-item-info">Oracle</a> 
					<a href="#" class="list-group-item list-group-item-info">Linux</a> 
					<a href="#" class="list-group-item list-group-item-info">集群与分布式</a> 
						</div><!-- 列表 end-->
				
	</div><!-- 上部分第二大部分 end -->
   </div></div><!--上部分 end-->

	<!-- 幻灯片的动态事件 -->

	<script type="text/javascript">
		$(function() {
			$('.carousel').carousel({
				interval : 1000
			});
			$("#box a.left").click(function() {
				$('.carousel').carousel("prev");
			})
			$("#box a.right").click(function() {
				$('.carousel').carousel("next");
			})

		});
	</script>
	
	
<div class=""style="padding-top: 30px"></div>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="新闻" src="..." id="news">
      </a>
    </div>
  </div>
</nav>

	<!-- 中间新闻部分 -->
	<div class="container-fluid">
		<div class="row clearfix">
			<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>精选</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>

			<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>

		<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>

<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>

			<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>

		<div class="col-md-4 column">
				<div class="thumbnail">
					<img src="<%=basePath%>/res/images/pic1.jpg" alt="...">
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>
			
	</div></div><!-- 新闻 end -->
	<div class=""style="padding-top:10px"></div>
	<div class="container" >
		<div class="row">
		<!-- 上部分第一大部分 start -->
	<div class="col-md-12 column">
	<!-- 分页 start -->
	<nav>
  <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
	</div></div></div><!-- 分页 end -->
	
 <!-- Footer
底部 -->
<footer class="bs-docs-footer" role="contentinfo">
  <div class="container" id="footer">
   <p>本项目源码受 <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>开源协议保护,文档受 <a rel="license" href="" target="_blank">CC BY 3.0</a> 开源协议保护。</p>
    <ul class="bs-docs-footer-links text-muted">
      <li>当前版本: v1.0</li>
      <li>&middot;</li>
       <li><a href="">更多</a></li>
    </ul>
  </div>
</footer>
	<!-- /footer -->
	
</body>
</html>
2016-12-23 12:54:38 tzs_1041218129 阅读数 3162

Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统 Demo

相关阅读:

1、Spring MVC+Hibernate JPA+ Bootstrap 搭建的博客系统项目中所遇到的坑

由于整个系统不是很难,这里就不详细介绍了,我相信看源码的话,应该能够看得懂。

如果觉得不错的话,欢迎给个 star , 如果你想完善这个项目的话,你也可以 fork 后修改然后推送给我。

源码地址:https://github.com/zhisheng17/springmvc

数据库springdemo.sql

下面给出下整个系统的截图吧,觉得不错,可以给个 star ,哈哈!后续继续在这个项目中加入新的项目。

截图:

首页



用户管理模块

  • 用户列表

  • 添加用户

  • 用户信息详情

  • 更新用户信息

  • 删除用户



博客管理模块

  • 博客列表

  • 博客详情

  • 添加博客

  • 更新博客

  • 删除博客

2018-02-12 22:47:35 zjsfdx 阅读数 1169

文件目录
这里写图片描述
index.html

<!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">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap.min.css" rel="stylesheet">
    <link href="app.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="side-nav" role="navigation">
        <ul class="nav-side-nav">
            <li><a class="tooltip-side-nav" href="#onepage"></a></li>
            <li><a class="tooltip-side-nav" href="#twopage"></a></li>
            <li><a class="tooltip-side-nav" href="#threepage"></a></li>
            <li><a class="tooltip-side-nav" href="#fourpage"></a></li>
            <li><a class="tooltip-side-nav" href="#five"></a></li>
        </ul>
    </div>
    <div class="onepage" id="onepage">
        <div class="onepage-bg" id="onepagebg"></div>
        <div class="container">
            <div class="row">
                <div class="title-text">
                    <div class="col-md-12 headfontsize">
                        <h1 class="headh1content">
                            *****<br /> 在这里你可以学习
                            <br /> 到你想要的
                        </h1>
                        <p style="margin-top:50px;line-height:33px;">只要你有耐心,相信程序对你而言,小菜一碟,你一定是可以顺利拿下的</p>
                        <p class="btn-app-store">
                            <a class="btn btn-success btn-lg" href="#">立即注册,开始学习</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="twopage" id="twopage">
        <div class="twopage-text">
            <h1 class="twopage-text-h1">
                选择你的第一节课程进行学习<img src="images/Androidicon.png" />
            </h1>
        </div>
        <div class="row">
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/2d.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/screct.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4">
                <a href="#">
                    <img src="images/2048.jpg" style="width:100%" />
                    <div class="classicon">
                        <h3>认真学习哦</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
        </div>
        <div class="twopagebtn">
            <a id="twopage-easy" href="#" class="btn btn-success btn-lg">如果你想学习,快快点击这里</a>
        </div>
    </div>
    <div class="threepage" id="threepage">
        <div class="threepage-bg" id="threepagebg">
            <div class="threepagecontent">
                <div class="threepagetext">
                    <h1>为什么要学习编程思想</h1>
                    <p>只要你有耐心,相信程序对你而言,小菜一碟!</p>
                </div>
                <a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册,要干活了</a>
            </div>
        </div>
    </div>
    <div class="fourpage" id="fourpage">
        <div class="container" style="width:70%">
            <div class="coursexingqing-text">
                <h1>要干活,必须要工具到位</h1>
                <p>怎么才能做到最快速的学习呢,你猜么?</p>
            </div>
            <div id="carousel-example-generic" class="carousel slide" data-interval="5000" style="height:300px">
                <ol class="carousel-indicators" style="margin-top:200px">
                    <li data-target="#carousel-example-generic" data-slide="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide="1" class=""></li>
                    <li data-target="#carousel-example-generic" data-slide="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                    <div class="item" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                    <div class="item" style="width:500px">
                        <img src="images/four-2-1.png" />
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="fivepage" id="five">
        <div class="fivepage-bg" id="fivepage">
            <div class="container">
                <div class="footertext">
                    <h1>你还在等待呢。赶快动手吧</h1>
                </div>
                <div class="footerbtncenter">
                    <div class="row">
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/tuling.jpg" class="footerbtn queyeicon" />
                            </div>
                        </a>
                    </div>
                </div>
                <div class="footertextbtn">
                    <button type="button" class="btn btn-success btn-lg" style="font-size:25px;">你还在看?在看?再看我吃了你</button>
                </div>
                <p class="footertextbtn-text">
                    只要你有耐心,相信程序对你而言,就是小菜一碟!
                </p>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./bootstrap.min.js"></script>
</body>

</html>

app.css

h1,h3,p,a,button{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.side-nav{
    position: fixed;
    top: 45%;
    right: 20px;
    z-index: 1;
}

.side-nav ul.nav-side-nav{
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.side-nav ul.nav-side-nav > li > a{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e2e2e2;
}

.side-nav ul.nav-side-nav > li{
    display: block;
    line-height: 1.45em;
    margin: 0;
    padding: 8px 0;
}

.onepage{
    height: 750px;
}

.onepage-bg{
    height: 800px;
    width: 100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
}

#onepagebg{
    background-image:url("images/topicon.jpg");
}

.headh1content{
    margin-top: 150px;
    line-height: 75px;
}

.title-text{
    margin-left: 50px;
}

.headfontsize h1{
    font-size: 50pt;
    color: #fff;
}

.headfontsize p{
    color: #fff;
}

.twopage{
    padding: 2px 0 0 2px;
    height: auto;
    position: relative;
}

.twopage-text{
    width: 100%;
    text-align: center;
}

.twopage-text-h1{
    margin-left: 120px;
    letter-spacing: 2px;
    margin-top: 80px;
    margin-bottom: 0;
    padding: 20px 0 0 0;
}

.twopage-text-h1 img{
    width: 120px;
    margin-top: -20px;
}

.twopage .row{
    margin-right: 0;
    margin-left: 0;
}

.twopage-courses{
    float: left;
    background: #fff;
    padding: 0 2px 2px 0;
    position: relative;
    overflow: hidden;
}

.twopage-courses > a{
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
    position: relative;
}

.classicon h3{
    margin-top: 120px;
    color: #d1e973;
}

.classicon h1{
    color: #fff5e1;
}

.classicon{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    opacity: 0;
}

.classicon:hover{
    background: #1eb450;
    opacity: 0.9;
    -webkit-transition:opacity 0.5s;
    transition: opacity 0.5s;
}

.twopagebtn{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.twopagebtn .btn-lg{
    font-size: 25px;
}

#twopage-easy{
    margin: 50px 0;
    margin-bottom: 100px;
}

.threepage{
    position: absolute;
    width: 100%;
    height: 800px;
}
.threepage-bg{
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#threepagebg{
    background-image:url("images/three.jpg");
}
.threepagecontent{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.threepagetext{
    margin-top: 100px;
    color: #fff;
}

.threepagetext p{
    margin-top: 20px;
    font-size: 20px;
    line-height: 32px;
}

.threepagebtncontent{
    margin-top: 450px;
    font-size: 25px;
}

.fourpage{
    height: 700px;
    background: url("images/four.jpg");
     margin-top: 800px;
}

.coursexingqing-text{
    color: #fff;
    margin-top: 100px;
    width: 100%;
    text-align: center;
}

.coursexingqing-text p{
    margin-top: 25px;
    font-size: 20px;
}

.fourpage .container .carousel{
    margin-top: 30px;
}

.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
    left: -20%;
    /*margin-left: -10px;*/
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    right: -20%;
    /*margin-right: -10px;*/
}

.fivepage-bg{
    height: 800px;
    width: 100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
}

#fivepage{
    background-image:url("images/five.jpg");
}

.footertext{
    margin-top: 55px;
    width: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.footerbtncenter{
    margin-top: 100px;
    text-align: center;
}

.queyeicon{
    width: 200px;
}

.queyeicon:hover{
    border: 2px solid #d9edf7;
}

.footertextbtn{
    margin-top: 150px;
    width: 100%;
    text-align: center;
}

.footertextbtn-text{
    margin-top: 20px;
    color: #000;
    text-align: center;
}

这里写图片描述

2016-04-27 11:28:59 Sunflowerfiona 阅读数 626

http://getbootstrap.com/javascript/#carousel

进度指示器

<div id="homepage-feature" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
                    <li data-target="#homepage-feature" data-slide-to="1" ></li>
                    <li data-target="#homepage-feature" data-slide-to="2" ></li>
                    <li data-target="#homepage-feature" data-slide-to="3" ></li>
                </ol>

进度指示器的data-target属性必须使用传送带的ID homepage-featureJS插件为传送带添加active类。

 <div class="carousel-inner">
                <div class="item active">
                    <img >
                </div>
                <div class="item ">
                <img >
                </div>
                ...
            </div>

然后是显示前一个后一个的按钮

<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
</a>
 <a class="right carousel-control" href="#homepage-feature" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-left"></span>
</a></div>

如此便好了。

angular、bootstrap初稿搭建

阅读数 1488

1、bootstrap3.0中,ie8不兼容响应式设计@media,需要添加如下2个查件          2、angular等英文例子thml中,出现中文乱码的问题。初步判断是文件编码的问题。只需要自己重新建一个html文件,把他们的代码拷贝到自己新建的html文件中即可。

博文 来自: tongdengquan

bootstrap搭建后台管理页面

阅读数 9

管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了iframe框架。nav组件接下来简单介绍一下nav组件常见的几种样式1.标准标签页tab页的样式通过外边框线条和内置padding构建出来下拉菜单组件下拉菜单依赖单独的...

博文 来自: weixin_34306676

bootstrap搭建后台管理页面

阅读数 20228

bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了iframe框架。

博文 来自: xwxyjy

mybatis spring 集成 bootstrap

阅读数 328

无意在老外的网站上发现了这个东西,本身提供的例子是有错误的,我下载下来之后修改了一下,能成功运行了虽然只是一个demo,麻雀虽小五脏俱全.这个例子主要体现一下东西:1.mybatis与springMVC集成2.利用了mybatis注解做查询(一般都是用xml配置的,因为mybatis使用配置更强大)3.结合了bootstrap的css布局和js相关的东西

博文 来自: tangruyi1992

图书管理系统(spring springmvc bootstrap)

阅读数 4716

Spring新手项目||图书管理系统一.本图书管理系统基于spring,springmvc,数据库为mysql。前端使用了Bootstrap。非常适合学习spring的新手。二.功能概述该系统实现读者和管理员登陆,图书的增删改查,读者的增删改查,借还图书,密码修改,卡号挂失,超期提醒等的功能。三.数据库本系统共有六张数据表。admin为管理员表,book_info为图书信息

博文 来自: YHJ1997
没有更多推荐了,返回首页