我与Bootstrap

2023-08-04 08:22:22

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

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

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

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

 <!DOCTYPE html>
 <html lang="zh-CN">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
   <body>
     <h1>你好，世界！</h1>

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
   </body>
 </html>

实例精选

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

建议

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

写在最后

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

码农公寓

相关文章