首页 > 代码库 > bootstrap 仿实例
bootstrap 仿实例
bootstrap实现一个网页，还有待改善（初版）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Ghost</title> 6 <style> 7 html,body{ 8 color:#505050; 9 line-height:1.75; 10 background:#ebebeb; 11 } 12 .main-header{ 13 text-align:center; 14 padding:42px 0; 15 background:#ffffff; 16 } 17 .main-header .branding{ 18 font-size:1.5em; 19 color:#303030; 20 21 } 22 a{ 23 color:#e67e22; 24 outline:none; 25 text-decoration:none; 26 } 27 .main-header .branding img{ 28 max-width:100%; 29 } 30 a:active,a:focus,a img{ 31 outline:none; 32 } 33 .main-navigation{ 34 text-align:center; 35 background:#ffffff; 36 border-top:1px; <!-- 设置上边框的样式： --> 37 border-bottom:3px solid #e1e1e1; <!-- solid：线类型： 实线,,,,3px：线宽：3像素 ,,,,#e1e1e1线颜色--> 38 margin-bottom:35px; 39 } 40 .main-navigation .menu{ 41 padding:0; 42 margin:0; 43 } 44 .main-navigation .menu li.nav-current{ 45 border-bottom:3px solid #e67e22; 46 margin-bottom:-2px; 47 } 48 .main-navigation .menu li{ 49 list-style:none; <!--去掉列表前面的点--> 50 display:inline-block; 51 position:relative; 52 } 53 .main-navigation .menu li a{ 54 color:#505050; 55 line-height:4em; 56 display:block; 57 padding:0 21px; 58 59 } 60 61 62 .post{ 63 padding:35px; 64 background:#ffffff; 65 margin-bottom:35px; 66 position:relative; 67 overflow:hidden; 68 } 69 .post .post-head{ 70 text-align:center; 71 } 72 .post .post-head .post-title{ 73 margin:0; 74 font-size:1.5em; 75 line-height:1em; 76 } 77 .post .post-head .post-title a{ 78 color:#303030; 79 } 80 .post .post-head .post-meta{ 81 color:#959595; 82 margin:14px 0 0px; 83 } 84 .post-content{ 85 font:400 18px/1.62 "Glyphicons Halflings"; 86 color:#444443; 87 88 } 89 .post-content p{ 90 margin-top:0; 91 margin-bottom:1.16em; 92 } 93 .btn-default{ 94 border:1px solid #e67e22; 95 background:#e67e22; 96 color:#ffffff; 97 transition:all 0.2s ease-in-out;<!--过渡效果--> 98 -webkit-transition:all 0.2s ease-in-out; 99 }100 .btn{101 padding:7px 14px;102 border-radius:6px;103 }104 .post .post-footer{105 margin-top:30px;106 border-top:1px solid #ebebeb;107 padding:21px 0 0;108 }109 .post .post-footer .tag-list{110 color:#959595;111 line-height:28px;112 }113 .side-bar .widget{114 background:#ffffff;115 padding:21px 30px;116 }117 .widget{118 margin-bottom:35px;119 }120 .widget .title{121 margin-top:0;122 padding-bottom:7px;123 border-bottom:1px solid #ebebeb;124 margin-bottom:21px;125 position:relative;126 127 }128 .widget .tag-cloud a{ 129 border:1px solid #ebebeb;130 padding:2px 7px;131 color:#959595;132 line-height:1.5em;133 display:inline-block;134 }135 .main-footer{136 background:#202020;137 padding:35px 0 0;138 color:#959595;139 }140 .main-footer .widget{141 padding:0px 30px;142 }143 .widget{144 margin-bottom:35px;145 }146 .main-footer .widget .title{147 color:#ffffff;148 border-bottom:1px #303030;149 150 }151 .widget .title{152 margin-top:0;153 padding-bottom:7px;154 border-bottom:1px solid #ebebeb;155 margin-bottom:21px;156 position:relative;157 }158 .main-footer .widget .recent-post .recent-single-post{159 border-bottom:1px dashed #303030;160 }161 .main-footer .recent-post .recent-single-post{162 border-bottom:1px dashed #303030;163 padding-bottom:14px;164 margin-bottom:14px;165 }166 167 </style>168 </head>169 <body class="home-template">170 <header class="main-header">171 <div class="container">172 <div class="row">173 <div class="col-md-12">174 <a class="branding" href=http://www.mamicode.com/"http://www.baidu.com">175 <img src=http://www.mamicode.com/"http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png">176 <h2 class="text-hide">177 bootstrap实例178 </h2>179 </a>180 </div>181 </div>182 </div>183 </header>184 <nav class="main-navigation">185 <div class="container">186 <div class="row">187 <div class="col-md-12">188 <div class="navbar-header">189 <span class="nav-toggle-button collapse" data-target="#main-menu">190 <span class="sr-only">Toggle Navigation</span>191 <i class="fa fa-bars"></i>192 </span>193 </div>194 <div class="collapse navbar-collapse" id="main-menu">195 <ul class="menu">196 <li class="nav-current" role="presentation">197 <a href=http://www.mamicode.com/"#">首页</a>198 </li>199 <li role="presentation">200 <a href=http://www.mamicode.com/"#">论坛</a>201 </li>202 <li role="presentation">203 <a href=http://www.mamicode.com/"#">快捷手册</a>204 </li>205 <li role="presentation">206 <a href=http://www.mamicode.com/"#">中文文档</a>207 </li>208 <li role="presentation">209 <a href=http://www.mamicode.com/"#">下载</a>210 </li>211 <li role="presentation">212 <a href=http://www.mamicode.com/"#">关于</a>213 </li>214 </ul>215 </div>216 </div>217 </div>218 </div>219 </nav>220 <section class="content-wrap">221 <div class="container">222 <div class="row">223 <main class="col-md-8 main-content" >224 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu">225 <div class="post-head">226 <h1 class="post-title">227 <a href=http://www.mamicode.com/"#">禁止 ‘ghost-foot’ 助手输出</a>228 </h1> 229 <div class="post-meta">230 <span class="author">作者<a href=http://www.mamicode.com/"#">王赛</a></span> 231 <time class="date" datetime="2015-10-10">2015年10月10日</time>232 </div>233 </div>234 <div class="post-content">235 <p>236 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj237 </p> 238 </div>239 <div class="post-permalink">240 <a href=http://www.mamicode.com/"#" class="btn btn-default">阅读全文</a>241 </div>242 <div class="footer clearfix">243 <hr>244 <div class="pull-left tag-list">245 <i class="fa fa-folder-open-o"></i>246 <a href=http://www.mamicode.com/"#" >Ghost</a>247 <a href=http://www.mamicode.com/"#">深度玩转Ghost</a>248 <a href=http://www.mamicode.com/"#">助手函数</a>249 250 </div>251 </div>252 </article>253 254 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu">255 <div class="post-head">256 <h1 class="post-title">257 <a href=http://www.mamicode.com/"#">禁止 ‘ghost-foot’ 助手输出</a>258 </h1> 259 <div class="post-meta">260 <span class="author">作者<a href=http://www.mamicode.com/"#">王赛</a></span> 261 <time class="date" datetime="2015-10-10">2015年10月10日</time>262 </div>263 </div>264 <div class="post-content">265 <p>266 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj267 </p> 268 </div>269 <div class="post-permalink">270 <a href=http://www.mamicode.com/"#" class="btn btn-default">阅读全文</a>271 </div>272 <div class="footer clearfix">273 <hr>274 <div class="pull-left tag-list">275 <i class="fa fa-folder-open-o"></i>276 <a href=http://www.mamicode.com/"#" >Ghost</a>277 <a href=http://www.mamicode.com/"#">深度玩转Ghost</a>278 <a href=http://www.mamicode.com/"#">助手函数</a>279 280 </div>281 </div>282 </article>283 284 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu">285 <div class="post-head">286 <h1 class="post-title">287 <a href=http://www.mamicode.com/"#">禁止 ‘ghost-foot’ 助手输出</a>288 </h1> 289 <div class="post-meta">290 <span class="author">作者<a href=http://www.mamicode.com/"#">王赛</a></span> 291 <time class="date" datetime="2015-10-10">2015年10月10日</time>292 </div>293 </div>294 <div class="post-content">295 <p>296 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj297 </p> 298 </div>299 <div class="post-permalink">300 <a href=http://www.mamicode.com/"#" class="btn btn-default">阅读全文</a>301 </div>302 <div class="footer clearfix">303 <hr>304 <div class="pull-left tag-list">305 <i class="fa fa-folder-open-o"></i>306 <a href=http://www.mamicode.com/"#" >Ghost</a>307 <a href=http://www.mamicode.com/"#">深度玩转Ghost</a>308 <a href=http://www.mamicode.com/"#">助手函数</a>309 310 </div>311 </div>312 </article>313 </main>314 <aside class="col-md-4 side-bar">315 <div class="widget">316 <h4 class="title">社区</h4>317 <div class="content community">318 <p>QQ群：123456</p>319 <p>320 <a href=http://www.mamicode.com/"#">问答社区</a>321 </p>322 <p>323 <a href=http://www.mamicode.com/"#">官网微博</a>324 </p>325 </div>326 </div>327 <div class="widget">328 <h4>下载 Ghost</h4>329 <div class="content download">330 <a href=http://www.mamicode.com/"#" class="btn btn-default btn-block">Ghost 中文版（5.0.9）</a>331 </div>332 </div>333 <div class="widget">334 <h4 class="title">标签云</h4>335 <div class="content tag-cloud">336 <a href=http://www.mamicode.com/"#">Ghost</a>337 <a href=http://www.mamicode.com/"#">新版本发布</a>338 <a href=http://www.mamicode.com/"#">主题</a>339 <a href=http://www.mamicode.com/"#">Ghost</a>340 <a href=http://www.mamicode.com/"#">Ghost</a>341 <a href=http://www.mamicode.com/"#">Ghost</a>342 <a href=http://www.mamicode.com/"#">Ghost</a>343 <a href=http://www.mamicode.com/"#">Ghost</a>344 <a href=http://www.mamicode.com/"#">新版本发布</a>345 <a href=http://www.mamicode.com/"#">主题</a>346 <a href=http://www.mamicode.com/"#">Ghost</a>347 <a href=http://www.mamicode.com/"#">Ghost</a>348 <a href=http://www.mamicode.com/"#">Ghost</a>349 <a href=http://www.mamicode.com/"#">Ghost</a>350 </div>351 </div>352 </aside>353 </div>354 </div>355 </section>356 357 <footer class="main-footer">358 <div class="container"> 359 <div class="row">360 <div class="col-md-4">361 <div class="widget">362 <h4>最新文章</h4>363 <div class="content recent-post">364 <div class="recent-single-post">365 <a href=http://www.mamicode.com/"#" class="post-title">禁止ghost_foot</a>366 <div class="date">March 4 2015</div>367 </div>368 <div class="recent-single-post">369 <a href=http://www.mamicode.com/"#" class="post-title">禁止ghost_foot</a>370 <div class="date">March 4 2015</div>371 </div>372 <div class="recent-single-post">373 <a href=http://www.mamicode.com/"#" class="post-title">禁止ghost_foot</a>374 <div class="date">March 4 2015</div>375 </div>376 </div>377 </div>378 </div>379 <div class="col-md-4">380 <div class="widget">381 <h4 class="title">标签云</h4>382 <div class="content tag-cloud">383 <a href=http://www.mamicode.com/"#">Ghost</a>384 <a href=http://www.mamicode.com/"">新版本发布</a>385 <a href=http://www.mamicode.com/"">主题</a>386 <a href=http://www.mamicode.com/"">Ghost</a>387 <a href=http://www.mamicode.com/"">Ghost</a>388 <a href=http://www.mamicode.com/"">Ghost</a>389 <a href=http://www.mamicode.com/"">Ghost</a>390 <a href=http://www.mamicode.com/"">Ghost</a>391 <a href=http://www.mamicode.com/"">新版本发布</a>392 <a href=http://www.mamicode.com/"">主题</a>393 <a href=http://www.mamicode.com/"">Ghost</a>394 <a href=http://www.mamicode.com/"">Ghost</a>395 <a href=http://www.mamicode.com/"">Ghost</a>396 <a href=http://www.mamicode.com/"">Ghost</a>397 </div>398 </div>399 </div>400 <div class="col-md-4">401 <div class="widget">402 <h4 class="title">合作伙伴</h4>403 <div class="content tag-cloud frend-links">404 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>405 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>406 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>407 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>408 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>409 <a href=http://www.mamicode.com/"#">bootstrap中文网</a>410 </div>411 </div>412 </div>413 </div>414 </div>415 </footer>416 </body>417 </html>
bootstrap 仿实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。