Home >Web Front-end >HTML Tutorial >bootstrap 简易模版_html/css_WEB-ITnose
bootstrap 简易模版_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:22:451076browse
<!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" / alt="bootstrap 简易模版_html/css_WEB-ITnose" > </div> <div class="item"> <img src="http://imgstore.cdn.sogou.com/app/a/100540002/702461.jpg" / alt="bootstrap 简易模版_html/css_WEB-ITnose" > </div> <div class="item"> <img src="http://imgsrc.baidu.com/forum/pic/item/5143ddc451da81cb445bd7135266d01608243158.jpg" / alt="bootstrap 简易模版_html/css_WEB-ITnose" > </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;}
抽时间整合了下bootstrap。
正在完善中...............
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：iframe异步加载技术及性能_html/css_WEB-ITnoseNext article：PyTips 0x0f