1210响应式网页,媒体查询，BootStrap

与生俱来123

已于 2022-12-12 15:52:31 修改

阅读量464

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-12-12 15:50:37 首次发布

本文链接：https://blog.csdn.net/qq_62919289/article/details/128265686

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

响应式网页

网页一套代码，可以兼容不同尺寸屏幕

媒体查询

目标：根据设备宽度的变化，设置差异化的样式

常用写法：max-width

min-width

    <style>
        @media(max-width:768px){
            body {
                background-color: pink;
            }
        }
        @media (min-width:1200px) {
            body {
                background-color: pink;
            } 
        }
    </style>
</head>
<body>
    
</body>

效果：（0-768px）和（1200+）背景颜色是粉色

书写顺序：

max-width：先大后小

min-width：先小后大

有层叠性，后面会覆盖前面

    <!-- 768px,992px,1200px,不同的宽度设置不同的颜色 -->
    <style>
        @media(min-width:768px){
            body {
                background-color: black;
            }
        }
        @media (min-width:992px) {
            body {
                background-color: pink;
            } 
        }
        @media (min-width:1200px) {
            body {
                background-color: skyblue;
            } 
        }
    </style>

完整写法

@media 关键词媒体类型 and （媒体特性）{CSS代码}

关键词：and/only/not

屏幕类型：网页设备类型，不用写

媒体特性：

link写法

    <link rel="stylesheet" href="./css/one.css" media="(min-width: 500px)">
    <link rel="stylesheet" href="./css/two.css" media="(min-width: 900px)">

BootStrap

是由Twitter公司开发维护的前段UI框架，提供大量编写好的CSS样式，允许开发者结合一定HTML结构以及JavaScript,快速编写功能和完善网页及交互功能。

网址

http://www.bootcss.com/

下载

登入网址

栅格系统

网页分成12份

代码

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

    <style>
        .container div {
            height: 50px;
            background-color: skyblue;
        }
    </style>

</head>
<body>
    <div class="container ">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">2</div>
        <div class="col-lg-3 col-md-6 col-sm-12">3</div>
        <div class="col-lg-3 col-md-6 col-sm-12">4</div>
    </div>
</body>

注意

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:

1. container类自带间距15px;

2. row类自带间距-15px，让盒子贴边缘

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

    <style>
        div {
            height: 50px;
            background-color: skyblue;
            margin-bottom: 50px;
        }
    </style>

</head>
<body>
    <div class="container">1</div>
    <div class="container">
        <div class="row">2</div>
    </div>

</body>

全局样式

以表格为例

每个效果，添加不同的类名

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped">
        <tr>
            <th>数字</th>
            <th>数字</th>
            <th>数字</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

以按钮为例子

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success">成功</button>
    <button class="btn btn-warning">警告</button>
    <button class="btn btn-info">一般消息</button>
    <button class="btn btn-danger">危险</button>
</body>

组件

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          下拉
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    
      <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
      </ol>
</body>

字体图标

直接复制图标类名

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-heart"></i>
</body>

插件

使用BootStrap插件实现交互效果

步骤

1、引入BootStrap样式

2、引入js文件：jQuery.js + BootStrap.min.js

下拉菜单为例子

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="dropdown">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          菜单
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li>干饭</li>
          <li>稀饭</li>
          <li>包子</li>
          <li>馒头</li>
        </ul>
      </div>

    <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

轮番图为例子

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./image/1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./image/3.webp" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./image/2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          ...
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>