首页 前端知识 HTML、CSS学习笔记7(媒体查询、BootStrap)

HTML、CSS学习笔记7(媒体查询、BootStrap)

2024-07-29 00:07:05 前端知识 前端哥 491 991 我要收藏

目录

一、媒体查询

1.max-min-width

2.书写顺序

 3.媒体类型

4.媒体查询——link写法

5.媒体查询——隐藏

二、BootStrap

1.BootStrap简介

 2.BootStrap下载

 3.BootStrap使用

4.BootStrap栅格系统

 5.BootStrap栅格系统——类

 6.bootstrap——全局CSS样式

 7.bootstrap——组件

 8.bootstrap——JavaScript插件实现常见的交互效果


 

一、媒体查询

1.max-min-width

/* 视口宽度小于等于768px, 网页背景色是粉色 */
      
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

        /* 视口宽度大于等于1200px, 网页背景色是skyblue */
     
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

2.书写顺序

CSS具有层叠性,例如:min-width先写width小的,之后写width大的(层叠性覆盖)

 3.媒体类型

 以下媒体类型知道了解即可,意义不大

 

 注:高度一般不判断(min/max)屏幕;

完整写法纯了解

4.媒体查询——link写法

 注:media中可以只写小括号(媒体特性),其他可省略

如:

    <!-- 视口宽度 >= 992px,网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px,网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="min-width: 992px">
    <link rel="stylesheet" href="./two.css" media="min-width: 1200px">

5.媒体查询——隐藏

* {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

        .left {
            width: 300px;
            min-height: 500px;
            background-color: pink;
        }

        .main {
            flex: 1;
            min-height: 500px;
            background-color: skyblue;
        }

        /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
      
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }

二、BootStrap

1.BootStrap简介

 2.BootStrap下载

 3.BootStrap使用

 注:引入——要么是bootstrap.css要么是 bootstrap.min.css(这两个源代码相同,只不过.min.css是格式化压缩好的,功能差不多。如果做项目可以选择Min,因为格式化了体积小)

4.BootStrap栅格系统

响应式网页布局就要使用栅格系统,栅格系统是将网页等分成12份

 以下图中,响应断点(视口屏幕)数字要牢记,类前缀(类名)要记住

 5.BootStrap栅格系统——类

 例:

    <!-- 版心样式:自带左右各15px的padding -->
    <div class="container">1</div>
  
    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>
   

    <!-- 宽度100%:自带左右各15px的padding -->
    <div class="container-fluid">3</div>

 6.bootstrap——全局CSS样式

全局CSS样式:控制某个单独标签的样式

组件:网页常见区域代码,如下拉菜单、导航图等

JavaScript插件:交互效果

定制:不满足需求的时候,修改框架的内容

 

 7.bootstrap——组件

 直接复制粘贴即可

 8.bootstrap——JavaScript插件实现常见的交互效果

注意有顺序要求,先引入jQuery.js,再引入bootstrap.min.js

 注:Carousel是轮播图代码

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14466.html
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!