我与Bootstrap

接触bootstrap是因为一个项目。实在是不了解前端。但是公司又不招前端工程师，没有办法，我这个后端工程师被赶鸭子上架了。

做这个项目之前，只是简单的在网上看了一些bootstrap教学视频。然后拿到了美工设计的网站就开始做了。Bootstrap中文网真的是一个很好的网站。在这里你可以找到一切你想要的东西。

  • 起步

    首先下载bootstrap程序包，然后使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

    拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

  1.  1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="css/bootstrap.min.css" rel="stylesheet">
12 
13     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
14     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
15     <!--[if lt IE 9]>
16       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
17       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
18     <![endif]-->
19   </head>
20   <body>
21     <h1>你好，世界！</h1>
22 
23     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
24     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
25     <!-- Include all compiled plugins (below), or include individual files as needed -->
26     <script src="js/bootstrap.min.js"></script>
27   </body>
28 </html>

     

  • 实例精选

　　在这里你可以按照自己的项目需求对起步里的代码进行改造了。

  • 建议　　

　　强烈建议大家使用sublime这个编辑器。

  • 写在最后

　　下面我将完整的介绍我用bootstrap做的网站的首页。

 

posted @ 2016-04-15 09:07  权杖攻城狮  阅读(271)  评论(0)  编辑  收藏  举报