day17-BootStrap重点介绍和轮滑图

一、前言

　　之前我们隆重的介绍了EasyUI和jqueryUi，他们只适合做后台管理，今天我们来讲的bootstrap 它既适合做前台，也时候做后台，而且动画效果是最好的。所以我们今天重点的来研究一下它是怎么用的。bootstarp中文官网：http://www.bootcss.com/

二、下载bootstarp

2.1、下载步骤

①选择某个bootstrap的版本，这边我们选用版本3

②下载bootstarp

③选择下载用于生产的bootstarp

2.2、bootstrap的使用

把下载下来的bootstrap文件解压，复制到pycharm中，然后自定义的html中引入样式bootstrap.css、bootstrap-theme.css(加了简单的颜色配比)，引入的js：bootstrap.js，bootstrap的js依赖jquery，所以还要引入jquery。

三、响应式布局

3.1、@media

说明：当屏幕的宽度超过自己设置的最小宽度，则使用@media中的样式，否则用其他样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: black;
        }
        @media (min-width: 700px) {
            .c2{
                background-color: grey;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2">dw</div>
</body>

所以：屏幕的宽度最小是700px，如果大于700px的时候 .c2的样式生效，小于700px，则.c2不生效。