1.体验bootstrap

1.引入官方提供的bootstrap的css

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

2.调用固定类名 container表示响应式版心

<div class="container"> 111 </div>

container-fluid表示响应式通栏盒子

<div class="container-fluid">222</div>

响应式都有左右15px内边距

<div>333</div>

2.行row类

1.引入官方提供的bootstrap的css

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

2.调用固定类名

<div ass="container"> <div class="row"> 文字内容 </div> </div>

3.体验响应式布局

<!-- 版心 -->

    <div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 每一行按照12列划分结构,相当于在给盒子设置宽度 -->
            <!-- 按照列的形式排列  在大屏和中屏一行4个每一个盒子占3列  在ipd端每一行排2个盒子每一个盒子占6列 在手机端每一行排一个盒子每一个盒子占12列 -->
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="row">01</div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">02</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">03</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">04</div
        </div>
    </div>

4.扩展-列偏移

<div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 列 -->
            <!-- 对应的屏幕列数-offset-份数  实现原理:给盒子设置向左的外边距 -->
            <div class="col-lg-4">1</div>
            <div class="col-lg-4 col-lg-offset-4">2</div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-lg-offset-3"></div>
        </div>

        <div class="row">
            <div class="col-lg-2 col-lg-offset-2">1</div>
            <div class="col-lg-3 col-lg-offset-5">2</div>
        </div>
    </div>

5.扩展-列嵌套

<div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 列 -->
            <div class="col-lg-6">
                <!-- 嵌套列: 响应式栅格布局,允许我们的盒子进行嵌套,每一次嵌套始终按照12等份进行划分结构,好处是为了方便我们网页响应式布局 -->
                <!-- 行 -->
                <div class="row">
                    <!-- 列 -->
                    <div class="col-lg-2">a</div>
                    <div class="col-lg-4">b</div>
                    <div class="col-lg-6">c</div>
                </div>
            </div>
            <div class="col-lg-6">右</div>
        </div>
    </div>

6.响应式工具

响应式工具:bootstrap显示和隐藏的工具类显示visible-屏幕隐藏hidden-屏幕

需求:默认页面显示3个盒子,从中屏开始第一个盒子需要在手机端, 平板端,中屏端隐藏,请你使用响应式工具完成

<div class="container">
        <div class="row">
            <div class="col-lg-4 hidden-md hidden-sm  hidden-xs">1</div>
            <div class="col-lg-4 col-md-6  col-xs-6  col-sm-6">2</div>
            <div class="col-lg-4 col-md-6  col-xs-6  col-sm-6">3</div>
        </div>
</div>

7.组件和js插件

组件:框架提前准备好的结构html+样式css

js插件:框架准备好结构html+样式css+行为js

注意点:所有的插件都依赖于juqery.js

<!-- 1.引入bootstrap.css -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!-- 2.先引入jquery.js -->
    <script src="./bootstrap/js/jquery-3.5.1.min.js"></script>
    <!-- 3.在引入bootstrap.js -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>

移动web