码迷,mamicode.com
首页 > 其他好文 > 详细

全栈老司机roadmap笔记--------Bootstrap (level 1)

时间:2016-10-14 09:50:54      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

level 1 

技术分享

framework defination:

技术分享

bootstrap file structure:

技术分享

技术分享

技术分享

技术分享

 

Adding bootstrp to our html:

技术分享

bootstrap relays on jquery, so we also need to add jquery inside out page

技术分享

技术分享

The container class

技术分享

the container-fluid class

技术分享

 practice code:

<!DOCTYPE html>
<html>
  <head>
    <title>Blasting Off With Bootstrap</title>
    <link href=‘css/main.css‘ rel=‘stylesheet‘>
    <link href=‘css/bootstrap.min.css‘ rel = ‘stylesheet‘>
  </head>
  <body>
    <div class=‘container‘>
      <h1>The Fastest Way to Space</h1>
      <p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
      <button type=‘button‘>Take the Tour</button>
      <button type=‘button‘>Book Tickets Now</button>
    </div>

    <p>This is our footer</p>
     <script src =‘//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js‘></script>
     <script src =‘js/bootstrap.min.js‘></script>

  </body>
</html>

 

 

 

 

 

 

 

 

全栈老司机roadmap笔记--------Bootstrap (level 1)

标签:

原文地址:http://www.cnblogs.com/jiangchen/p/5958959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!