ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップのシンプルな template_html/css_WEB-ITnose
ブートストラップのシンプルな template_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:451075ブラウズ
<!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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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 class="container"> <h5 class="tit">小故事(根据屏幕变化布局)</h5> <div class="row"> <div class="col-xs-6 col-sm-3 container_add"> <p>在一个冰淇淋圣代花很少的钱就可买到的日子里，一个10岁的男孩走进一个咖啡店，坐在一张桌子旁边，一个女侍者把一杯水放在他面前。"一只冰淇淋圣代多少钱?"</p> </div> <div class="col-xs-6 col-sm-3 container_add"> <p>朱先生白手起家，是一个建筑公司老板。虽然目前家大业大，但创业过程并非无风无雨。他很会找地，很会想点子，所在地的政商关系也相当良好，才能耐住台湾建筑业所经历的长时间不景气。 朱先生没念过什么书，很希望自己的孩子多读点……</p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3 container_add"> <p>去过庙的人都知道，一进庙门，首先是弥陀佛，笑脸迎客，而在他的北面，则是黑口黑脸的韦陀。但相传在很久以前，他们并不在同一个庙里，而是分别掌管不同的庙。<br />弥乐佛热情快乐，所以来的人非常多，但他什么都不在乎，丢三拉四，没有好好的管理账务，所以依然入不敷出。而韦陀虽然管账是一把好手，但成天阴着个脸，太过严肃，搞得人越来越少，最后香火断绝。<br />佛祖在查香火的时候发现了这个问题，就将他们俩放在同一个庙里，由弥乐佛负责公关，笑迎八方客，于是香火大旺。而韦陀铁面无私，锱珠必较，则让他负责财务，严格把关。在两人的分工合作中，庙里一派欣欣向荣景象。</p> </div> <div class="col-xs-6 col-sm-3 container_add"> <p>有个鲁国人擅长编草鞋，他妻子擅长织白绢。他想迁到越国去。友人对他说：“你到越国去，一定会贫穷的。”“为什么？”“草鞋，是用来穿着走路的，但越国人习惯于赤足走路；白绢，是用来做帽子的，但越国人习惯于披头散发。凭着你的长处，到用不到你的地方去，这样，要使自己不贫穷，难道可能吗？”</p> </div> <div class="col-xs-6 col-sm-3 container_add"> <p> 我有一个朋友，家境比较富裕，也很少受苦。刚进大学的时候，她有很多美好的愿望，也一直认为自己能够实现。后来她才发现现实并不是自己想的那个样子。她英语4级没过，兼职做了几天，人家就嫌她专业知识不过关，辞退了她。更要命的是，……</p> </div> <div class="col-xs-6 col-sm-3 container_add"> <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><br /><br />/*style.css*/<br />
.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;}
時間をかけてブートストラップを統合しました。
開発中....
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。