首页 > 代码库 > 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 仿实例