首页 > 代码库 > Bootstrap的学习以及简单运用
Bootstrap的学习以及简单运用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>柠檬学院</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="http://www.mamicode.com/css/animate.min.css"> 9 10 <link rel="stylesheet" href="http://www.mamicode.com/css/main1.css"> 11 <!--link rel href谨记--> 12 13 </head> 14 <body> 15 <div id="top01"></div> 16 <!--导航条--> 17 <nav class="navbar navbar-default navbar-fixed-top"> 18 <div class="container"> 19 <!--logo和按钮--> 20 <div class="navbar-head"> 21 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#b1"> 22 <span class="sr-only">Toggle navigation</span> 23 <span class="icon-bar"></span> 24 <span class="icon-bar"></span> 25 <span class="icon-bar"></span> 26 </button> 27 <div> 28 <a href="http://www.mamicode.com/#" class="navbar-brand">柠檬学院</a> 29 </div> 30 </div> 31 <!--导航--> 32 <div class="collapse navbar-collapse"> 33 <ul class="nav navbar-nav navbar-right"> 34 <li><a href="http://www.mamicode.com/#home">首页</a></li> 35 <li><a href="http://www.mamicode.com/#ketang">柠檬课堂</a></li> 36 <li><a href="http://www.mamicode.com/#shiji">学院事迹</a></li> 37 <li><a href="http://www.mamicode.com/#jiuye">JavaEE就业班</a></li> 38 <li><a href="http://www.mamicode.com/#jiangshi">讲师团</a></li> 39 <li><a href="http://www.mamicode.com/#lianxi">联系我们</a></li> 40 </ul> 41 </div> 42 </div> 43 </nav> 44 45 <section id="home"> 46 <div class="container"> 47 <div class="row wow fadeInUp" data-wow-duration="1s"> 48 <div class="col-sm-1"></div> 49 <div class="col-sm-10"> 50 <p> 51 <h1>柠檬学院</h1>一家“专注培养高精端IT人才，全力打造在线教育知名品牌”的教育咨询公司。公司以在线网络授课平台为基础，整合社会更高品质、更具效率、更先进的教育资源， 52 配置智能化的学习帮助计划和最适合的教学方案，聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释 53 放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。 54 </p> 55 </div> 56 <div class="col-sm-1"></div> 57 </div> 58 </div> 59 </section> 60 61 62 <section id="ketang"> 63 <div class="container"> 64 <div class="row wow rollIn bg-yellow" data-wow-delay="0.5s"> 65 <div class="col-sm-6"> 66 <a href="http://www.mamicode.com/#" target="_blank"> 67 <img src="http://www.mamicode.com/images/6.jpg" class="img-responsive"/> 68 <h3>刘老-柠檬学院Java金牌讲师</h3> 69 <p>Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...</p> 70 </a> 71 </div> 72 <div class="col-sm-6"> 73 <a href="http://www.mamicode.com/#" target="_blank"> 74 <img src="http://www.mamicode.com/images/7.jpg" class="img-responsive"/> 75 <h3>李哥-柠檬学院Java银牌讲师</h3> 76 <p>京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地气。</p> 77 </a> 78 </div> 79 </div> 80 </div> 81 </section> 82 83 <section id="shiji"> 84 <div class="container"> 85 <div class="row"> 86 <div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2"> 87 <h3>李哥之漫漫IT路 </h3> 88 <p> 大学专业是电子信息工程，不甚喜欢。我更喜欢在室友上课的时候，独自一人待在宿舍抓肉鸡，并为之废寝忘食。每天拿着扫描器，导入成千上万的IP疯狂扫描。当我成功抓到第一只肉鸡并远程操控对方电脑的时候，兴奋不已。我按捺住内心的狂喜，用颤抖的双手在终端敲下了一行命令：shutdown -s -t 0 。 89 从窗户向外观望，宿舍楼左前方是几张乒乓球台。每当夜幕降临，华灯初上，我时常约乒协的小伙伴在此切磋球技。在昏黄的灯光下听着周董的稻香，挥舞着球拍，时间总是过的很快很快。 90 研究了整整一个学期的黑客技术。当我能熟练的抓鸡、拿站、提权的时候，我突然意识到这些事情没有任何意义。想明白了这一点，我毅然决然的告别了黑客时代，告别了曾经无比狂热的黑客精神。</p> 91 </div> 92 <div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2"> 93 <img src="http://www.mamicode.com/images/11.jpg" class="img-circle"/> 94 </div> 95 </div> 96 </div> 97 </section> 98 99 100 <section id="shiji01">101 <div class="container">102 <div class="row">103 <div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">104 <h3>柠檬缘</h3>105 <p> 106 凡是都是冥冥中注定的，我一出生就注定了，在一个农村家庭，而且父母都没有上过学。我的妈妈重男轻女，在我童年的记忆中都是打骂我，有时候我在想这难道是后妈吗？为啥老这样对我呢（后来才明白，家庭经济不好，愁的了）？但是我爸爸对我很亲，深深记得，我爸爸拿16元给我买了一件黄色的衣服，超级好看，就因为那件衣服，爸妈还吵架了…….107 由于自己家庭贫穷，穿的衣服都是很破很旧，同学都不跟我玩而且很排斥我。但是我很喜欢学习，小学语文老师管的很严，有一次迟到，在教室外被罚站了一节课。从此再也没有迟到过。后来由于频繁换数学老师，不负责任，成绩就不行了….108 记忆中的初中老师都很势力眼，对老师和家境好的孩子都是很好，按成绩排座位，学习不好的没有关系的都排后面，我呢，学习不好，后面太乱，就要求做讲台前。高中的生活是比较开心的，目标只有一个，就是考一个好大学，每天早上四点左右起床，特别是冬天，好冷，但是有目标的人就是有闯劲，Never give up ！只想考上大学，但是结果并不理想。因为从小心灵就受打击，一直都是耻辱感很强，别人越是看不起我，我就偏偏要做到。想通过自己的努力改变人生都不容易。109 </p>110 </div>111 <div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">112 <img src="http://www.mamicode.com/images/12.jpg" class="img-circle"/>113 </div>114 </div>115 </div>116 </section>117 <div id="buy"></div> 118 <section id="jiuye">119 <div class="row wow lightSpeedIn bg-yellow">120 <div class="col-sm-12 d1">121 <h2>JavaEE就业班</h2>122 </div>123 <div class="col-sm-4">124 <div class="d2">125 <img src="http://www.mamicode.com/images/9.jpg"/>126 <a href="http://www.mamicode.com/#" class="btn btn-warning">6500RMB-加入购买</a>127 </div>128 </div>129 <div class="col-sm-4">130 <div class="d3">131 <img src="http://www.mamicode.com/images/16.jpg"/>132 <a href="http://www.mamicode.com/#" class="btn btn-warning">7500RMB-加入购买</a>133 </div>134 </div>135 <div class="col-sm-4">136 <div class="d4">137 <img src="http://www.mamicode.com/images/15.jpg"/>138 <a href="http://www.mamicode.com/#" class="btn btn-info">开始试听</a>139 </div>140 </div>141 </div>142 </section>143 <div id="teacher"></div>144 <section id="jiangshi">145 <div class="container">146 <div class="row wow bounceInDown bg-green">147 <div class="col-sm-3">148 <div class="p1">149 <a href="http://www.mamicode.com/#" target="_blank">150 <img src="http://www.mamicode.com/images/3.jpg" class="img-circle"/>151 <h3>李哥</h3>152 <p>李老师-柠檬学院Java银牌讲师153 京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地...154 </p>155 </a>156 </div>157 </div>158 <div class="col-sm-3">159 <div class="p2">160 <a href="http://www.mamicode.com/#" target="_blank">161 <img src="http://www.mamicode.com/images/17.jpg" class="img-circle"/>162 <h3>刘老</h3>163 <p>刘老师-柠檬学院Java金牌讲师164 Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...165 </p>166 </a>167 </div>168 </div>169 <div class="col-sm-3">170 <div class="p3">171 <a href="http://www.mamicode.com/#" target="_blank">172 <img src="http://www.mamicode.com/images/19.jpg" class="img-circle"/>173 <h3>任老师</h3>174 <P>任老师-柠檬学院Java金牌讲师175 从事开发5年，之后从事IT教育行业10年，在IT教育方面始终...176 </p>177 </a>178 </div>179 </div>180 <div class="col-sm-3">181 <div class="p4">182 <a href="http://www.mamicode.com/#" target="_blank">183 <img src="http://www.mamicode.com/images/20.jpg" class="img-circle"/>184 <h3>储哥</h3>185 <P>储老师-柠檬学院Java银牌讲师186 精通JavaEE企业级开发，对SSM架构有深入理解...187 </p>188 </a>189 </div>190 </div>191 </div>192 </div>193 </section>194 195 <section id="lianxi">196 <div class="container">197 <div class="row wow bounceInUp bg-red">198 <div class="col-sm-6">199 <h2>联系我们</h2>200 <p> 聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。</p>201 <p>地址：北京市xxxx</p>202 <p>电话：152xxxxxxxx</p>203 <p>电子邮件：xxxx@xx.com</p>204 <p>旗下网站：Java资源库 www.java1995.com</p>205 </div>206 <div class="col-sm-6">207 <form method="post">208 <div class="col-sm-6">209 <input type="text" class="form-control" placeholder="请输入您的姓名"/>210 </div>211 <div class="col-sm-6">212 <input type="text" class="form-control" placeholder="请输入您的电子邮件"/>213 </div>214 <div class="col-sm-12">215 <input type="text" class="form-control" placeholder="移动电话">216 </div>217 <div class="col-sm-12">218 <input type="text" class="form-control" placeholder="标题">219 </div>220 <div class="col-sm-12">221 <textarea placeholder="留言内容" class="form-control" rows="4"></textarea>222 </div>223 <div class="col-sm-6">224 <input type="submit" class="form-control btn btn-warning" value="http://www.mamicode.com/提交"/>225 </div>226 </form> 227 </textarea>228 </div>229 </div>230 </div> 231 </section>232 233 <section id="banquan">234 <div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">235 <div class="col-sm-6">236 <img src="http://www.mamicode.com/images/1.png"/>237 </div>238 <div class="col-sm-6">239 <h5>课程存档 课程内容版权均归北京阳光柠檬科技有限公司所有 240 京ICP备16040204号-1241 </h5>242 <p>243 Powered by EduSoho v7.2.0 ©2014-2016244 </p>245 </div>246 </section>247 248 <section id="top">249 <div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">250 <div class="col-sm-12">251 <a href="http://www.mamicode.com/#top01" class="btn btn-warning">顶部</a>252 <a href="http://www.mamicode.com/#buy" class="btn btn-danger">购买</a>253 <a href="http://www.mamicode.com/#teacher" class="btn btn-info">讲师</a>254 </div> 255 </div>256 </section>257 258 259 <script src="http://www.mamicode.com/js/jquery.min.js"></script>260 <script src="http://www.mamicode.com/js/bootstrap.min.js"></script>261 <script src="http://www.mamicode.com/js/wow.min.js"></script>262 <script>263 new WOW().init();264 </script>265 </body>266 </html>
1 .navbar-default .navbar-brand{ 2 font-size:36px; 3 color:#02B980; 4 font-weight:bold; 5 height:70px; 6 line-height:35px; 7 } 8 .navbar-collapse li a{ 9 font-size:20px; 10 height:70px; 11 line-height:35px; 12 font-weight:bold; 13 //background-color:#02B980; 14 } 15 16 #home{ 17 height:400px; 18 margin-top:70px; 19 font-weight:bold; 20 text-align:center; 21 width:100%; 22 background-color:#02B980; 23 padding:90px 0; 24 } 25 #home h1{ 26 color:white; 27 } 28 #ketang{ 29 text-align:center; 30 padding:70px; 31 } 32 33 #ketang a img{ 34 width:400px; 35 height:250px; 36 margin:0 auto; 37 } 38 #ketang a{ 39 text-decoration:none; 40 } 41 42 #shiji{ 43 background-color:pink; 44 padding:40px 0; 45 text-align:center; 46 height:370px; 47 } 48 #shiji01{ 49 background-color:purple; 50 padding:40px 0; 51 text-align:center; 52 height:370px; 53 } 54 #shiji h3,#shiji01 h3{ 55 font-weight:bold; 56 font-size:24px; 57 } 58 #shiji p,#shiji01 p{ 59 line-height:20px; 60 } 61 #jiuye{ 62 text-align:center; 63 //padding:80px 0; 64 } 65 #jiuye .d1{ 66 background-color:#02B980; 67 } 68 #jiuye .d2,#jiuye .d3,#jiuye .d4{ 69 background-color:pink; 70 width:430px; 71 } 72 #jiuye img{ 73 width:430px; 74 height:250px; 75 } 76 #jiuye a{ 77 font-size:24px; 78 text-decoration:none; 79 margin-top:30px; 80 margin-bottom:20px; 81 } 82 #jiuye a:hover{ 83 color:blue; 84 background-color:yellow; 85 } 86 #jiangshi{ 87 margin-top:80px; 88 89 } 90 #jiangshi .p1,#jiangshi .p2,#jiangshi .p3,#jiangshi .p4{ 91 background-color:#ECECEC; 92 width:216px; 93 height:270px; 94 } 95 #jiangshi a{ 96 text-decoration:none; 97 } 98 #jiangshi img{ 99 margin:10px 40px;100 }101 #lianxi{102 background-color:pink;103 margin-top:30px;104 }105 #lianxi h2{106 font-size:36px;107 font-weight:bold;108 }109 #lianxi p{110 font-weight:bold;111 line-height:30px;112 }113 #lianxi input{114 margin-top:20px;115 height:40px;116 margin-bottom:20px;117 }118 #banquan{119 background-color:white;120 height:120px;121 }122 #banquan img{123 margin-top:30px;124 margin-left:100px;125 }126 #banquan h5{127 text-align:right;128 margin-right:200px;129 margin-top:35px;130 }131 #banquan p{132 text-align:right;133 margin-right:200px;134 135 }136 #banquan a{137 margin:0 auto;138 }139 #top a{140 float:right;141 margin-right:50px;142 }
案例所需要的引用，和素材，源码
链接：http://pan.baidu.com/s/1bpKaqfH 密码：robl
Bootstrap的学习以及简单运用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。