你的位置:首页 > 网页设计

[网页设计]bootstrap 简易模版


<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0">  <title>bootstrap</title>  <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />  <link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="header">  <div class="header_logo"></div>  <nav class="navbar navbar-default">    <div class="container-fluid">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" dara-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="javscript:;">Brand</a>      </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">          <li class="active">            <a href="javascript:;">Link<span class="sr-only">(current)</span></a>          </li>          <li><a href="javascript:;">Link</a></li>          <li class="dropdown">            <a href="javascript:;" 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="javascript:;">Active</a>              </li>              <li>                <a href="javascript:;">                  Another action                </a>              </li>              <li role="separator" class="divider"></li>              <li>                <a href="javascript:;">                  Separated                </a>              </li>            </ul>          </li>        </ul>        <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-defailt">Submit</button>        </form>        <ul class="nav navbar-nav navbar-right">          <li>            <a href="javascript:;">info<span class="badge">30</span></a>          </li>          <li class="dropdown">            <a href="javascript:;" 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="javascript:;">Link</a>              </li>              <li>                <a href="javascirpt:;">                  Dropdown                </a>              </li>              <li role="separator" class="divider"></li>              <li>                <a href="javascript:;">                  separator                </a>              </li>            </ul>          </li>        </ul>      </div>    </div>  </nav></div><div id="myCarousel" class="carousel slide">  <ol class="carousel-indicators">    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <li data-target="#myCarousel" data-slide-to="1"></li>    <li data-target="#mrCarousel" data-slide-to="2"></li>  </ol>  <div class="carousel-inner">    <div class="item active">      <img src="http://img5.duitang.com/uploads/item/201408/12/20140812133247_zcLCB.jpeg" />    </div>    <div class="item">      <img src="http://imgstore.cdn.sogou.com/app/a/100540002/702461.jpg" />    </div>    <div class="item">      <img src="http://imgsrc.baidu.com/forum/pic/item/5143ddc451da81cb445bd7135266d01608243158.jpg" />    </div>  </div>  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a></div><div class="content clearfix">  <div class="content_left">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">      <div class="panel panel-default">        <div class="panel-heading" role="tab" id="headingOne">          <h4 class="panel-title">            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">标题一</a>          </h4>        </div>        <div id="collapseOne" class="panel-collapse in" role="tabpanel" aria-labelledby="headingOne">          <div class="panel-body">            <ul>              <li><a href="javascript:;">内容一</a></li>              <li><a href="javascript:;">内容一</a></li>              <li><a href="javascript:;">内容一</a></li>              <li><a href="javascript:;">内容一</a></li>              <li><a href="javascript:;">内容一</a></li>            </ul>          </div>        </div>      </div>      <div class="panel panel-default">        <div class="panel-heading" role="tab" id="headingTwo">          <h4 class="panel-title">            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">标题二</a>          </h4>        </div>        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">          <div class="panel-body">            <ul>              <li>                <a href="javascript:;">内容二</a>              </li>              <li>                <a href="javascript:;">内容二</a>              </li>              <li>                <a href="javascript:;">内容二</a>              </li>              <li>                <a href="javascript:;">内容二</a>              </li>              <li>                <a href="javascript:;">内容二</a>              </li>              <li>                <a href="javascript:;">内容二</a>              </li>            </ul>          </div>        </div>      </div>      <div class="panel panel-default">        <div class="panel-heading" role="tab" id="headingThree">          <h4 class="panel-title">            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">标题三</a>          </h4>        </div>        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">          <div class="pannel-body">            <ul>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>              <li>                <a href="javascript:;">内容三</a>              </li>            </ul>          </div>        </div>      </div>      <div class="panel panel-default">        <div class="panel-heading" role="tab" id="headingFore">          <h4 class="panel-title">            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFore" aria-expanded="false" aria-controls="collapseFore">标题四</a>          </h4>        </div>        <div id="collapseFore" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFore">          <div class="pannel-body">            <ul>              <li>                <a href="javascript:;">内容四</a>              </li>              <li>                <a href="javascript:;">内容四</a>              </li>              <li>                <a href="javascript:;">内容四</a>              </li>              <li>                <a href="javascript:;">内容四</a>              </li>              <li>                <a href="javascript:;">内容四</a>              </li>            </ul>          </div>        </div>      </div>    </div>  </div>  <div class="content_right">    <div class="clearfix">      <ol class="breadcrumb">        <li>          <a href="javascript:;">home</a>        </li>        <li>          <a href="javascript:;">2016年</a>        </li>        <li class="active">          <a href="javascript:;">三月</a>        </li>      </ol>      <div class="dropdown">        <button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown">          下拉菜单          <span class="caret"></span>        </button>        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul">          <li role="presentation">            <a role="presentation" tabindex="-1" href="javascript:;">标题一</a>          </li>          <li role="presentation">            <a role="menuitem" tabindex="-1" href="havascript:;">标题二</a>          </li>          <li role="presentation" class="divider"></li>          <li role="presentation">            <a role="menuitem" abindex="-1" href="javascript:;">标题三</a>          </li>        </ul>      </div>      <div class="dropdown">        <button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown">          下拉菜单          <span class="caret"></span>        </button>        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul">          <li role="presentation">            <a role="presentation" tabindex="-1" href="javascript:;">标题一</a>          </li>          <li role="presentation">            <a role="menuitem" tabindex="-1" href="havascript:;">标题二</a>          </li>          <li role="presentation" class="divider"></li>          <li role="presentation">            <a role="menuitem" abindex="-1" href="javascript:;">标题三</a>          </li>        </ul>      </div>      <div class="dropdown">        <button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown">          下拉菜单          <span class="caret"></span>        </button>        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul">          <li role="presentation">            <a role="presentation" tabindex="-1" href="javascript:;">标题一</a>          </li>          <li role="presentation">            <a role="menuitem" tabindex="-1" href="havascript:;">标题二</a>          </li>          <li role="presentation" class="divider"></li>          <li role="presentation">            <a role="menuitem" abindex="-1" href="javascript:;">标题三</a>          </li>        </ul>      </div>    </div>    <nav id="navbar-example" class="navbar navbar-default navbar-static scroll_add" role="navigation">      <div class="navbar-header">        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">          <span class="sr-only">切换导航</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>        <a href="javascript:;" class="navbar-brand">监听事件</a>      </div>      <div class="collapse navbar-collapse bs-js-bavbar-scrollspy">        <ul class="nav navbar-nav">          <li>            <a href="#icos">标题一</a>          </li>          <li>            <a href="#svn">标题二</a>          </li>          <li class="dropdown">            <a href="javascript:;" id="navbarDropl" class="dropdown-toggle" data-toggle="dropdown">标题              <b class="caret"></b>            </a>            <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDropl">              <li>                <a href="#jmeter" tabindex="-1">标题三</a>              </li>              <li>                <a href="#ejb" tabindex="-1">标题四</a>              </li>              <li class="divider"></li>              <li>                <a href="#spring" tabindex="-1">标题五</a>              </li>            </ul>          </li>        </ul>      </div>    </nav>    <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scroll_main">      <h4 id="ios">内容一</h4>      <p>个农民从洪水中救起了他的妻子,他的孩子却被淹死了。事后,人们议论纷纷。有的说他做得对,因为孩子可以再生一个,妻子却不能死而复活;有的说他做错了,因为妻子可以另娶一个,孩子却不能死而复活。我听了人们的议论,也感到疑惑难决:如果只能救活一人,究竟应该救妻子呢,还是救孩子?<br />于是我去拜访那个农民,问他当时是怎么想的。他答道:“我什么也没想。洪水袭来,妻子在我身过,我抓住她就往附近的山坡游。当我返回时,孩子已经被洪水冲走了”。<br />归途上,我琢磨着农民的话,对自己说:所谓人生的抉择不少便是如此。</p>      <h4 id="svn">内容二</h4>      <p>这是发生在英国的一个真实故事。有位孤独的老人,无儿无女,又体弱多病,他决定搬到养老院去。老人宣布出售他漂亮的住宅。购买者闻讯蜂拥而至。住宅底价8万英镑,但人们很快就将它炒到了10万英镑。价钱还在不断攀升。老人满目忧郁,是的,要不是健康情形不行,他是不会卖掉这栋陪他度过大半生的住宅的。<br />一个衣着朴素的青年来到老人眼前,弯下腰,低声说:“先生,我也好想买这栋住宅,可我只有1万英镑。可是,如果您把住宅卖给我,我保证会让您依旧生活在这里,和我一起喝茶,读报,散步,天天都快快乐乐的——相信我,我会用整颗心来照顾您”!老人颔首微笑,把住宅以1万英镑的价钱卖给了他。<br />完成梦想,不一定非得要冷酷地厮杀和欺诈,有时,只要你拥有一颗爱人之心就可以了。</p>      <h4 id="jmeter">内容三</h4>      <p>有一个博士分到一家研究所,成为学历最高的一个人。<br />有一天他到单位后面的小池塘去钓鱼,正好正副所长在他的一左一右,也在钓鱼。他只是微微点了点头,这两个本科生,有啥好聊的呢?不一会儿,正所长放下钓竿,伸伸懒腰,蹭蹭蹭从水面上如飞地走到对面上厕所。博士眼睛睁得都快掉下来了:水上飘?不会吧?这可是一个池塘啊。正所长上完厕所回来的时候,同样也是蹭蹭蹭地从水上飘回来了。怎么回事?博士生又不好去问,自己是博士生哪!<br />过一阵,副所长也站起来,走几步,蹭蹭蹭地飘过水面上厕所。这下子博士更是差点昏倒:不会吧,到了一个江湖高手集中的地方?<br />博士生也内急了。这个池塘两边有围墙,要到对面厕所非得绕十分钟的路,而回单位上又太远,怎么办?博士生也不愿意去问两位所长,憋了半天后,也起身往水里跨:我就不信本科生能过的水面,我博士生不能过。只听咚的一声,博士生栽到了水里。<br />两位所长将他拉了出来,问他为什么要下水,他问:“为什么你们可以走过去呢?”两所长相视一笑:“这池塘里有两排木桩子,由于这两天下雨涨水正好在水面下。我们都知道这木桩的位置,所以可以踩着桩子过去。你怎么不问一声呢”?<br />学历代表过去,只有学习力才能代表将来。尊重经验的人,才能少走弯路。一个好的团队,也应该是学习型的团队。</p>      <h4 id="ejb">内容四</h4>      <p>有个老木匠准备退休,他告诉老板,说要离开建筑行业,回家与妻子儿女享受天伦之乐。老板舍不得他的好工人走,问他是否能帮忙再建一座房子,老木匠说可以。但是大家后来都看得出来,他的心已不在工作上,他用的是软料,出的是粗活。房子建好的时候,老板把大门的钥匙递给他。“这是你的房子,”他说,“我送给你的礼物”。他震惊得目瞪口呆,羞愧得无地自容。如果他早知道是在给自己建房子,他怎么会这样呢?现在他得住在一幢粗制滥造的房子里!<br />我们又何尝不是这样。我们漫不经心地“建造”自己的生活,不是积极行动,而是消极应付,凡事不肯精益求精,在关键时刻不能尽最大努力。等我们惊觉自己的处境,早已深困在自己建造的“房子”里了。把你当成那个木匠吧,想想你的房子,每天你敲进去一颗钉,加上去一块板,或者竖起一面墙,用你的智慧好好建造吧!你的生活是你一生唯一的创造,不能抹平重建,即使只有一天可活,那一天也要活得优美、高贵,墙上的铭牌上写着:“生活是自己创造的”。</p>      <h4 id="spring">内容五</h4>      <p>有个太太多年来不断抱怨对面的太太很懒惰,“那个女人的衣服永远洗不干净,看,她晾在外院子里的衣服,总是有斑点,我真的不知道,她怎么连洗衣服都洗成那个样子”。<br />直到有一天,有个明察秋毫的朋友到她家,才发现不是对面的太太衣服洗不干净。细心的朋友拿了一块抹布,把这个太太的窗户上的灰渍抹掉,说:“看,这不就干净了吗”?<br />原来,是自己家的窗户脏了。</p>    </div>    <table class="table table-hover">      <caption>表格</caption>      <thead>        <tr>          <th>名称</th>          <th>城市</th>          <th>密码</th>        </tr>      </thead>      <tbody>        <tr>          <td>名称</td>          <td>北京</td>          <td>12412441</td>        </tr>        <tr>          <td>名称</td>          <td>北京</td>          <td>12412441</td>        </tr>        <tr>          <td>名称</td>          <td>北京</td>          <td>12412441</td>        </tr>        <tr>          <td>名称</td>          <td>北京</td>          <td>12412441</td>        </tr>      </tbody>    </table>    <!-- <div >      <h5 >小故事(根据屏幕变化布局)</h5>      <div >        <div >          <p>在一个冰淇淋圣代花很少的钱就可买到的日子里,一个10岁的男孩走进一个咖啡店,坐在一张桌子旁边,一个女侍者把一杯水放在他面前。"一只冰淇淋圣代多少钱?"</p>        </div>        <div >          <p>朱先生白手起家,是一个建筑公司老板。虽然目前家大业大,但创业过程并非无风无雨。他很会找地,很会想点子,所在地的政商关系也相当良好,才能耐住台湾建筑业所经历的长时间不景气。  朱先生没念过什么书,很希望自己的孩子多读点……</p>        </div>        <div ></div>        <div >          <p>去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀。但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙。<br />弥乐佛热情快乐,所以来的人非常多,但他什么都不在乎,丢三拉四,没有好好的管理账务,所以依然入不敷出。而韦陀虽然管账是一把好手,但成天阴着个脸,太过严肃,搞得人越来越少,最后香火断绝。<br />佛祖在查香火的时候发现了这个问题,就将他们俩放在同一个庙里,由弥乐佛负责公关,笑迎八方客,于是香火大旺。而韦陀铁面无私,锱珠必较,则让他负责财务,严格把关。在两人的分工合作中,庙里一派欣欣向荣景象。</p>        </div>        <div >          <p>有个鲁国人擅长编草鞋,他妻子擅长织白绢。他想迁到越国去。友人对他说:“你到越国去,一定会贫穷的。”“为什么?”“草鞋,是用来穿着走路的,但越国人习惯于赤足走路;白绢,是用来做帽子的,但越国人习惯于披头散发。凭着你的长处,到用不到你的地方去,这样,要使自己不贫穷,难道可能吗?”</p>        </div>        <div >          <p> 我有一个朋友,家境比较富裕,也很少受苦。刚进大学的时候,她有很多美好的愿望,也一直认为自己能够实现。后来她才发现现实并不是自己想的那个样子。她英语4级没过,兼职做了几天,人家就嫌她专业知识不过关,辞退了她。更要命的是,……</p>        </div>        <div >          <p> 我有一个朋友,家境比较富裕,也很少受苦。刚进大学的时候,她有很多美好的愿望,也一直认为自己能够实现。后来她才发现现实并不是自己想的那个样子。她英语4级没过,兼职做了几天,人家就嫌她专业知识不过关,辞退了她。更要命的是,……</p>        </div>      </div>    </div> -->    <div class="list-group panel-default">      <a href="javascript:;" class="list-group-item panel-heading">        <h4>标题</h4>      </a>      <a href="javascript:;" class="list-group-item">        <h4 class="list-group-heading">          扁鹊的医术        </h4>        <p class="list-group-text">扁鹊答:“长兄治病,是治病于病情发作之前。由于一般人不知道他事先能铲除病因,所以他的名气无法传出去;中兄治病,是治病于病情初起时。一般人以为他只能治轻微的小病,所以他的名气只及本乡里。而我是治病于病情严重之时。一般人都看到我在经脉上穿针管放血、在皮肤上敷药等大手术,所以以为我的医术高明,名气因此响遍全国。</p>      </a>      <a href="javascript:;" class="list-group-item">        <h4>          曲突徒薪        </h4>        <p class="list-group-text">有人对主人说:“如果当初听了那位先生的话,今天也不用准备筵席,而且没有火灾的损失,现在论功行赏,原先给你建议的人没有被感恩,而救火的人却是座上客,真是很奇怪的事呢!主人顿时省悟,赶紧去邀请当初给予建议的那个客人来吃酒。</p>      </a>    </div>  </div></div><div class="footer"></div><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script type="text/javascript">  /*轮播*/  $(".carousel").carousel("cycle");</script></body></html>

/*style.css*/
.carousel .carousel-inner{	height:400px;}.carousel .carousel-inner img{	display:block;	width:100%;	height:auto;	margin:0 auto;}.content{	margin:20px 20px 0 20px;	overflow:hidden;}.panel-group .panel{	width:200px;	background:#f2f2f2;}.content_left{	float:left;	width:200px;}.content_right{	float:right;	width:82%;	margin-left:20px;}.dropdown{	float:left;	margin-right:10px;}.scroll_main{	position:relative;	height:150px;	border:1px solid #ccc;	border-top:0;	margin-top:-20px;	padding-top:20px;	overflow:auto;}.scroll_add{	margin-top:20px;}.container_add{	width:29%;	background-color:#dedef8;	-webkit-box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;	-moz-box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;	-ms-box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;	box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;	margin:0 10px 10px 0;}.tit{	height:30px;	line-height:30px;	background:#f2f2f2;	font-size:14px;	color:#337ab7;	font-weight:600;	text-indent:30px;}.badge{	margin-left:8px;}

  

 

 

抽时间整合了下bootstrap。

正在完善中...............