集训day_10（Bootstrap）

一、响应式布局

1、手写响应式

<style>
        .wrap{
                display: flex;
                flex-wrap: wrap;
                }
        @media screen and (min-width:992px){
                .wrap>img{
                flex-basis: 25%;
                }
             }
        @media screen and (min-width:768px) and (max-width: 991px){
                .wrap>img{
                flex-basis: 50%;
                }
             }
        @media screen and (max-width: 767px){
                .wrap>img{
                flex-basis: 100%;
                }
             }
</style>

二、栅格布局

1、栅格布局的响应式

<div class="container bg-info mx-auto">
    <div class="row">
        <span class="col-sm-1 col-md-3 col-lg-2 col-xl-4 bg-danger">1</span>
        <span class="col-sm-4 col-md-2 col-lg-4 col-xl-2 bg-primary">2</span>
        <span class="col-sm-3 col-md-4 col-lg-3 col-xl-3 bg-success">3</span>
        <span class="col-sm-4 col-md-3 col-lg-3 col-xl-3 bg-warning">4</span>
    </div>
</div>

三、组件

1、按钮组和下拉菜单

<div class="container">
    <div class="btn-toolbar">
<!-- 按钮组 -->
        <div class="btn-group">
            <button class="btn btn-danger">1</button>
            <button class="btn btn-danger">2</button>
        </div>
<!-- 下拉菜单 -->
        <div class="dropdown">
    <button class="btn dropdown-toggle btn-primary" data-toggle="dropdown">3</button>
            <ul class="dropdown-menu">
            <li class="dropdown-item">春</li>
            <li class="dropdown-item">夏</li>
            <li class="dropdown-item">秋</li>
            <li class="dropdown-item">东</li>
            </ul>
        </div>
    </div>
</div>