鲍勃の部屋
  • Blog
  • Work
  • About
  • Contact

和鲍勃一起来学Bootstrap - 第2课

6/20/2014

0 Comments

 
这课来学习 bootstrap 的Hello world

步骤一:去官网 下载 bootstrap 的编译版本 bootstrap-3.03-dist.zip 并解压

在 $YOUR_PATH/dis/css/下就是编译好的 bootstraps.css , bootstrap-theme.css
 $YOUR_PATH/dis/js/ 下是预编译好的 bootstrap.js

可以合来直接使用啦

下面就用一个模板来开始我们的hello world之旅 
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>
用浏览器打开,是不是看到 hello bootstarp了, 收工

等等,你可能说为什么没有用第一步下载解压的bootstrap.css 和 bootstrap.js

好吧,bob犯懒了,请大家自行把 bootstrap.css 和 bootstrap.js 和 jquery.js 替换成自已目录下的文件,再打开页面看到hello bootstrap 就ok 了。
0 Comments



Leave a Reply.

    Author

    鲍勃 (上海)
    互联网码农

    小A

    Archives

    July 2014
    June 2014
    May 2014

    Categories

    All
    AngularJS
    App
    Bootstrap
    Cocos2dx-c++
    Css
    CSS3
    Design Pattern
    Express
    Funny
    Game
    Html5
    Jasmine
    Javascript
    Lua
    Music
    Node.js
    Pattern
    Phonegap
    Php
    Python
    Tdd
    Tips

    RSS Feed

Powered by Create your own unique website with customizable templates.