bootstrap一

最新推荐文章于 2021-11-28 20:07:32 发布

11adaacc

最新推荐文章于 2021-11-28 20:07:32 发布

阅读量267

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/Rayshaan/article/details/111027626

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2020.12.11 04:12

文章目录

01.使用(本地文件)

<!doctype html>
<html lang="zh-cn"> 声明要改成zh-cn
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
响应式meta 标签
jquerybootstrap依赖于jq，要先引入
bootstrap.csscss文件
popper.jsbootstrap4中提示警告弹窗需要
bootstrap.jsjs文件

完整示例:

<!doctype html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <script src="jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
        <title>Document</title>
    </head>
    <body>     
        
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

02.Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件
container：响应式容器(自适应大小)
container-fluid:固定宽度容器(任何时候宽度都是100%)

Bootstrap原生带三种container宽度规范：

.container, 居中，适配不同的断的 max-width 尺寸。
.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。
.container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

表格描述了 container在不同的屏幕的 max-width 规范，以及 .container 、 .container-fluid 的断点区别
在这里插入图片描述

03.简单实现自适应容器

容器:<div class="container-self">自定义容器</div>
css部分:

<style>
	/*容器基本设置*/
   .container-self{
       background-color: blue;
       height: 100px;
       margin: 100px auto;               
   }
   /*超小屏幕*/
   @media(max-width:575px){
       .container-self{
           background-color: blueviolet;
           width: 100%;
       }
   }
   /*小屏幕*/
   @media(min-width:576px) and (max-width:767px){
       .container-self{
           background-color: greenyellow;
           width: 540px;
       }
   }
    /*中等屏幕*/
    @media(min-width:768px) and (max-width:991px){
       .container-self{
           background-color: rgb(18, 21, 206);
           width: 720px;
       }
   }
    /*大屏幕*/
    @media(min-width:992px) and (max-width:1199px){
       .container-self{
           background-color: rgb(219, 25, 138);
           width: 960px;
       }
   }
    /*超大屏幕*/
    @media(min-width:1200px){
       .container-self{
           background-color: rgb(245, 118, 14);
           width: 1140px;
       }
   }
</style>

实现效果:容器根据浏览器宽度自动切换宽度和颜色(为了方便区分)

当浏览器的宽度

最大宽度为575px(小屏幕) 容器宽度变为100%(充满屏幕)，颜色变为紫色
处于576px和767px之间(小屏幕)，容器宽度变为540px，颜色变为黄绿色
处于768px和991px之间(中等屏幕)，容器宽度变为720px，颜色变为蓝色
处于992px和1199px之间(大屏幕)，容器宽度变为960px，颜色变为粉色
最小宽度为1200px(超大屏幕) 容器宽度变为1140px，颜色变为橙色

04.栅格系统

概念

格栅系统是基于一个12列(无论屏幕多大)的布局，有5种响应尺寸(对应不同屏幕)
支持Sass mixins自由调用，并结合自己预定义的css、js类，用来创建各种形状和尺寸的布局

实际上就是在一个容器里处理行与列的关系

原理

提供了集中内容居中、水平填充网页内容的方法，使用.container作为父盒子
内部由行(.row)和列(.col)组成
1）每列都有水平的padding值，行则用于空值它们之间的间隔
2）同时在负边距的行上抵消，从而实现列中所有的内容在视觉上是左侧对齐的体验
开发者呈现的内容必须放置在列(.col-*)中，而且只有列可以是行的直接子元素，否则都是违法的，不可以在.col-*以上添加呈现内容
.col-*后面有不同的数组，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列，如果想用三个等宽的列，则去12的1/3，即.col-sm-4
.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流失的，其尺寸大小受父元素的定义影响
总共有五个栅格等级，每个响应式分界点隔出一个等级:
特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大(大、特大也可以成为宽、超宽).col-xl-*

简单总结:一个大容器，容器里面有行，行里有列，列可以根据5档屏幕决定放多少

栅格选项
在这里插入图片描述

05.简单实现栅格

css部分

.container{
   	height: 100px;
    background-color: pink;
}
.container>div>div:nth-child(1){
    background-color: red;
}
.container>div>div:nth-child(2){
    background-color: green;
}
.container>div>div:nth-child(3){
    background-color: yellow;
}

html部分

<div class="container">
    <div class="row">
        <div>第一部分</div>
        <div>第三部分</div>
        <div>第二部分</div>
    </div>
</div>

运行效果
在这里插入图片描述

要实现的效果:任何情况下都使列(内容)充满行

思路:以最小屏幕为标准给列设置类(col)

<div class="container">
   <div class="row">
        <div class="col">第一部分</div>
        <div class="col">第二部分</div>
        <div class="col">第三部分</div>
    </div>
</div>

在这里插入图片描述
2020.12.11 05:32

11adaacc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
bootstrap一

2020.12.11 04:12文章目录01.使用(本地文件)02.Container容器03.简单实现自适应容器04.栅格系统05.简单实现栅格01.使用(本地文件)<!doctype html><html lang="zh-cn"> 声明要改成zh-cn<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">响应式meta 标签jq
复制链接

扫一扫