bootstrap-tutorial

what is Bootstrap?

wel come to bootstrap Bootstrap is Twitter create web tools 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。Bootstrap 自带了 13 个 jQuery 插件，这些插件为 Bootstrap 中的组件赋予了“生命”。其中包括：

课程前最好具备技能： html\css\javaScript

先下载bootstrap.com, 我是从官方下载的。打开dist文件减压后可以看见

dist
├── css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── npm.js

打开 bower.json 查看支持的JQuery版本下载 http://labfile.oss.aliyuncs.com/jquery-2.0.3.js

#hello world & bootstrap One more time 2.1 栅格系统（布局）

<!DOCTYPE html>
<html>
    <head>
        <title>
            Bootstrap
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- 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://labfile.oss.aliyuncs.com/html5shiv/3.7.0/html5shiv.js">
            </script>
            <script src="http://labfile.oss.aliyuncs.com/respond.js/1.3.0/respond.min.js">
            </script>
        <![endif]-->
    </head>

    <body>
        <h1>
            Hello, world!
        </h1>
        <h2 class="page-header">
            区域一
        </h2>
        <p>
            Bootstrap has a few easy ways to quickly get started, each one appealing
            to a different skill level and use case. Read through to see what suits
            your particular needs.
        </p>
        <h2 class="page-header">
            区域二
        </h2>
        <p>
            If you work with Bootstrap's uncompiled source code, you need to compile
            the LESS files to produce usable CSS files. For compiling LESS files into
            CSS, we only officially support Recess, which is Twitter's CSS hinter based
            on less.js.
        </p>
        <h2 class="page-header">
            区域三
        </h2>
        <p>
            Within the download you'll find the following directories and files, logically
            grouping common resources and providing both compiled and minified variations.
        </p>
        <script src="js/jquery-2.0.3.js">
        </script>
        <script src="js/bootstrap.min.js">
        </script>
    </body>

</html>

<div class="container">
    <h1>
        Hello, world!
    </h1>
    <div class="row">
        <div class="col-xs-4">
            <h2 class="page-header">
                区域一
            </h2>
            <p>
                Bootstrap has a few easy ways to quickly get started, each one appealing
                to a different skill level and use case. Read through to see what suits
                your particular needs.
            </p>
        </div>
        <div class="col-xs-4">
            <h2 class="page-header">
                区域二
            </h2>
            <p>
                If you work with Bootstrap's uncompiled source code, you need to compile
                the LESS files to produce usable CSS files. For compiling LESS files into
                CSS, we only officially support Recess, which is Twitter's CSS hinter based
                on less.js.
            </p>
        </div>
        <div class="col-xs-4">
            <h2 class="page-header">
                区域三
            </h2>
            <p>
                Within the download you'll find the following directories and files, logically
                grouping common resources and providing both compiled and minified variations.
            </p>
        </div>
    </div>
</div>