01-bootstrap简介

1-个人学习总结
2-慕课网教程地址：https://www.imooc.com/learn/14

bootstrap的引入

 <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <!--你自己的样式文件 -->
   <link href="css/your-style.css" rel="stylesheet">        
   <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
   <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

 <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

全局样式

Bootstrap框架的核心是轻量的CSS基础代码库，他并没有一味的重置样式，而是注重各浏览器基础表现，降低开发难度。
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：

• 移除body的margin声明
• 设置body的背景色为白色
• 为排版设置了基本的字体、字号和行高
• 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

<div  class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  <p><a href="#" >Learn more »</a></p>
</div>

jumbotron超大屏幕

顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
1-创建一个带有 class .jumbotron. 的容器 <div>。
2-除了更大的 <h1>，字体粗细 font-weight 被减为 200。

//如上列所示

为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，如下面的实例所示：

<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
        </p>
    </div>
</div>