bootstrap实现一个网页
html文件
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Ghost</title> 6 <link type="text/css" rel="stylesheet" href="bootstrap.min.css"></link> 7 <link type="text/css" rel="stylesheet" href="mystyle.css"></link> 8 </head> 9 <body class="home-template"> 10 <header class="main-header"> 11 <div class="container"> 12 <div class="row"> 13 <div class="col-md-12"> 14 <a class="branding" href="http://www.baidu.com"> 15 <img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png"> 16 <h2 class="text-hide"> 17 bootstrap实例 18 </h2> 19 </a> 20 </div> 21 </div> 22 </div> 23 </header> 24 <nav class="main-navigation"> 25 <div class="container"> 26 <div class="row"> 27 <div class="col-md-12"> 28 <div class="navbar-header"> 29 <span class="nav-toggle-button collapse" data-target="#main-menu"> 30 <span class="sr-only">Toggle Navigation</span> 31 <i class="fa fa-bars"></i> 32 </span> 33 </div> 34 <div class="collapse navbar-collapse" id="main-menu"> 35 <ul class="menu"> 36 <li class="nav-current" role="presentation"> 37 <a href="#">首页</a> 38 </li> 39 <li role="presentation"> 40 <a href="#">论坛</a> 41 </li> 42 <li role="presentation"> 43 <a href="#">快捷手册</a> 44 </li> 45 <li role="presentation"> 46 <a href="#">中文文档</a> 47 </li> 48 <li role="presentation"> 49 <a href="#">下载</a> 50 </li> 51 <li role="presentation"> 52 <a href="#">关于</a> 53 </li> 54 </ul> 55 </div> 56 </div> 57 </div> 58 </div> 59 </nav> 60 <section class="content-wrap"> 61 <div class="container"> 62 <div class="row"> 63 <main class="col-md-8 main-content" > 64 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 65 <div class="post-head"> 66 <h1 class="post-title"> 67 <a href="#">禁止 'ghost-foot' 助手输出</a> 68 </h1> 69 <div class="post-meta"> 70 <span class="author">作者<a href="#">王赛</a></span> 71 <time class="date" datetime="2015-10-10">2015年10月10日</time> 72 </div> 73 </div> 74 <div class="post-content"> 75 <p> 76 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 77 </p> 78 </div> 79 <div class="post-permalink"> 80 <a href="#" class="btn btn-default">阅读全文</a> 81 </div> 82 <div class="footer clearfix"> 83 <hr> 84 <div class="pull-left tag-list"> 85 <i class="fa fa-folder-open-o"></i> 86 <a href="#" >Ghost</a> 87 <a href="#">深度玩转Ghost</a> 88 <a href="#">助手函数</a> 89 </div> 90 </div> 91 </article> 92 93 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 94 <div class="post-head"> 95 <h1 class="post-title"> 96 <a href="#">禁止 'ghost-foot'助手输出</a> 97 </h1> 98 <div class="post-meta"> 99 <span class="author">作者<a href="#">王赛</a></span> 100 <time class="date" datetime="2015-10-10">2015年10月10日</time> 101 </div> 102 </div> 103 <div class="post-content"> 104 <p> 105 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 106 </p> 107 </div> 108 <div class="post-permalink"> 109 <a href="#" class="btn btn-default">阅读全文</a> 110 </div> 111 <div class="footer clearfix"> 112 <hr> 113 <div class="pull-left tag-list"> 114 <i class="fa fa-folder-open-o"></i> 115 <a href="#" >Ghost</a> 116 <a href="#">深度玩转Ghost</a> 117 <a href="#">助手函数</a> 118 119 </div> 120 </div> 121 </article> 122 123 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 124 <div class="post-head"> 125 <h1 class="post-title"> 126 <a href="#">禁止 'ghost-foot'助手输出</a> 127 </h1> 128 <div class="post-meta"> 129 <span class="author">作者<a href="#">王赛</a></span> 130 <time class="date" datetime="2015-10-10">2015年10月10日</time> 131 </div> 132 </div> 133 <div class="post-content"> 134 <p> 135 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 136 </p> 137 </div> 138 <div class="post-permalink"> 139 <a href="#" class="btn btn-default">阅读全文</a> 140 </div> 141 <div class="footer clearfix"> 142 <hr> 143 <div class="pull-left tag-list"> 144 <i class="fa fa-folder-open-o"></i> 145 <a href="#" >Ghost</a> 146 <a href="#">深度玩转Ghost</a> 147 <a href="#">助手函数</a> 148 149 </div> 150 </div> 151 </article> 152 </main> 153 <aside class="col-md-4 side-bar"> 154 <div class="widget"> 155 <h4 class="title">社区</h4> 156 <div class="content community"> 157 <p>QQ群：123456</p> 158 <p> 159 <a href="#">问答社区</a> 160 </p> 161 <p> 162 <a href="#">官网微博</a> 163 </p> 164 </div> 165 </div> 166 <div class="widget"> 167 <h4>下载 Ghost</h4> 168 <div class="content download"> 169 <a href="#" class="btn btn-default btn-block">Ghost 中文版（5.0.9）</a> 170 </div> 171 </div> 172 <div class="widget"> 173 <h4 class="title">标签云</h4> 174 <div class="content tag-cloud"> 175 <a href="#">Ghost</a> 176 <a href="#">新版本发布</a> 177 <a href="#">主题</a> 178 <a href="#">Ghost</a> 179 <a href="#">Ghost</a> 180 <a href="#">Ghost</a> 181 <a href="#">Ghost</a> 182 <a href="#">Ghost</a> 183 <a href="#">新版本发布</a> 184 <a href="#">主题</a> 185 <a href="#">Ghost</a> 186 <a href="#">Ghost</a> 187 <a href="#">Ghost</a> 188 <a href="#">Ghost</a> 189 </div> 190 </div> 191 </aside> 192 </div> 193 </div> 194 </section> 195 196 <footer class="main-footer"> 197 <div class="container"> 198 <div class="row"> 199 <div class="col-md-4"> 200 <div class="widget"> 201 202 <div class="title"> 203 <h4>最新文章</h4> 204 </div> 205 <div class="content recent-post"> 206 <div class="recent-single-post"> 207 <a href="#" class="post-title">禁止ghost_foot</a> 208 <div class="date">March 4 2015</div> 209 </div> 210 <div class="recent-single-post"> 211 <a href="#" class="post-title">禁止ghost_foot</a> 212 <div class="date">March 4 2015</div> 213 </div> 214 <div class="recent-single-post"> 215 <a href="#" class="post-title">禁止ghost_foot</a> 216 <div class="date">March 4 2015</div> 217 </div> 218 </div> 219 </div> 220 </div> 221 <div class="col-md-4"> 222 <div class="widget"> 223 <h4 class="title">标签云</h4> 224 <div class="content tag-cloud"> 225 <a href="#">Ghost</a> 226 <a href="">新版本发布</a> 227 <a href="">主题</a> 228 <a href="">Ghost</a> 229 <a href="">Ghost</a> 230 <a href="">Ghost</a> 231 <a href="">Ghost</a> 232 <a href="">Ghost</a> 233 <a href="">新版本发布</a> 234 <a href="">主题</a> 235 <a href="">Ghost</a> 236 <a href="">Ghost</a> 237 <a href="">Ghost</a> 238 <a href="">Ghost</a> 239 </div> 240 </div> 241 </div> 242 <div class="col-md-4"> 243 <div class="widget"> 244 <h4 class="title">合作伙伴</h4> 245 <div class="content tag-cloud frend-links"> 246 <a href="#">bootstrap中文网</a> 247 <a href="#">bootstrap中文网</a> 248 <a href="#">bootstrap中文网</a> 249 <a href="#">bootstrap中文网</a> 250 <a href="#">bootstrap中文网</a> 251 <a href="#">bootstrap中文网</a> 252 </div> 253 </div> 254 </div> 255 </div> 256 </div> 257 </footer> 258 </body> 259 </html>
css文件
1 html, body { 2 color: #505050; 3 line-height: 1.75; 4 background: #ebebeb; 5 } 6 7 .main-header { 8 text-align: center; 9 padding: 42px 0; 10 background: #ffffff; 11 } 12 13 .main-header .branding { 14 font-size: 1.5em; 15 color: #303030; 16 } 17 18 a { 19 color: #e67e22; 20 outline: none; 21 text-decoration: none; 22 } 23 24 .main-header .branding img { 25 max- 100%; 26 } 27 28 a:active, a:focus, a img { 29 outline: none; 30 } 31 32 .main-navigation { 33 text-align: center; 34 background: #ffffff; 35 border-top: 1px; 36 border-bottom: 3px solid #e1e1e1; 37 margin-bottom:35px; 38 } 39 40 .main-navigation .menu { 41 padding: 0; 42 margin: 0; 43 } 44 45 .main-navigation .menu li.nav-current { 46 border-bottom: 3px solid #e67e22; 47 margin-bottom: -2px; 48 } 49 50 .main-navigation .menu li { 51 list-style: none; 52 display : inline-block; 53 position: relative; 54 } 55 56 .main-navigation .menu li a { 57 color: #505050; 58 line-height: 4em; 59 display: block; 60 padding: 0 21px; 61 } 62 63 .post { 64 padding: 35px; 65 background: #ffffff; 66 margin-bottom: 35px; 67 position: relative; 68 overflow: hidden; 69 } 70 71 .post .post-head { 72 text-align: center; 73 } 74 75 .post .post-head .post-title { 76 margin: 0; 77 font-size: 1.5em; 78 line-height: 1em; 79 } 80 81 .post .post-head .post-title a { 82 color: #303030; 83 } 84 85 .post .post-head .post-meta { 86 color: #959595; 87 margin: 14px 0 0px; 88 } 89 90 .post-content { 91 font: 400 18px/1.62 "Glyphicons Halflings"; 92 color: #444443; 93 } 94 95 .post-content p { 96 margin-top: 0; 97 margin-bottom: 1.16em; 98 } 99 100 .btn-default { 101 border: 1px solid #e67e22; 102 background: #e67e22; 103 color: #ffffff; 104 transition: all 0.2s ease-in-out; 105 106 -webkit-transition:all 0.2s ease-in-out; 107 } 108 109 .btn { 110 padding: 7px 14px; 111 border-radius: 6px; 112 } 113 114 .post .post-footer { 115 margin-top: 30px; 116 border-top: 1px solid #ebebeb; 117 padding: 21px 0 0; 118 } 119 120 .post .post-footer .tag-list { 121 color: #959595; 122 line-height: 28px; 123 } 124 125 .side-bar .widget { 126 background: #ffffff; 127 padding: 21px 30px; 128 } 129 130 .widget { 131 margin-bottom: 35px; 132 } 133 134 .widget .title { 135 margin-top: 0; 136 padding-bottom: 7px; 137 border-bottom: 1px solid #ebebeb; 138 margin-bottom: 21px; 139 position: relative; 140 } 141 142 .widget .tag-cloud a { 143 border: 1px solid #ebebeb; 144 padding: 2px 7px; 145 color: #959595; 146 line-height: 1.5em; 147 display: inline-block; 148 } 149 150 .main-footer { 151 background: #202020; 152 padding: 35px 0 0; 153 color: #959595; 154 } 155 156 .main-footer .widget { 157 padding: 0px 30px; 158 } 159 160 .widget { 161 margin-bottom: 35px; 162 } 163 164 .main-footer .widget .title { 165 color: #ffffff; 166 border-bottom: 1px #303030; 167 } 168 169 .widget .title { 170 margin-top: 0; 171 padding-bottom: 7px; 172 border-bottom: 1px solid #ebebeb; 173 margin-bottom: 21px; 174 position: relative; 175 } 176 177 .main-footer .widget .recent-post .recent-single-post { 178 border-bottom: 1px dashed #303030; 179 } 180 181 .main-footer .recent-post .recent-single-post { 182 border-bottom: 1px dashed #303030; 183 padding-bottom: 14px; 184 margin-bottom: 14px; 185 }