作者:the5fire | 标签: bootstrap 转载地址:http://www.the5fire.com/bootstrap-introduce.html
html5我可不再上网查一个html文件的头部应该怎么定义,只需要写<!DOCTYPE html>就ok。
当然提供的便利不知这些。
文字的描述还是干巴巴的,还是上些代码好些。
先来展示下我花了5分钟编写的界面(如果不是和别人一边说话一边写时间可能更短):
然后看下代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bootstrap Demo</title> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" target="_blank" href="http://www.the5fire.net">the5fire</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class=""> <a href="http://www.the5fire.net/about" target="_blank">关于the5fire</a> </li> </ul> </div> </div> </div> </div> <div class="container"> <header class="jumbotron subhead" id="overview"> <h1>欢迎来到the5fire的博客</h1> <p class="lead">使用Bootstrap构建</p> <div class="subnav"> <ul class="nav nav-pills"> <li><a href="#">python</a></li> <li><a href="#">django</a></li> <li><a href="#">java</a></li> <li><a href="#">读书</a></li> <li><a href="#">设计模式</a></li> <li><a href="#">软件开发</a></li> </ul> </div> </header> <section id="typography"> <div class="page-header"> <h1>python <small>记录python的学习历程</small></h1> </div> <!-- Headings & Paragraph Copy --> <div class="row"> <div class="span4"> <h3>python学习笔记</h3> <ul> <li>python学习笔记1</li> <li>python学习笔记2</li> <li>python学习笔记3</li> </ul> </div> <div class="span4"> <h3>python实战训练</h3> <ul> <li>python爬虫实战1</li> <li>python爬虫实战2</li> <li>python文件管理1</li> </ul> </div> <div class="span4"> <h3>python心得总结</h3> <ul> <li>python总结1</li> <li>python总结2</li> <li>python总结3</li> </ul> </div> </div> </section> </div> <div class="container"> <footer class="footer"> <p class="pull-right"><a href="#">返回顶部</a></p> <p>网站地图</p> <p>版权声明: <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div> </body> </html>
一切都是如此简单,不用在去像设计师一样去考虑该如何画界面之类的东西,作为程序员压力顿减。只需要用bootstrap定义好的库就行。