Javascript知识【BootStrap】

发布于:2023-01-19 ⋅ 阅读:(207) ⋅ 点赞:(0)
  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 🏆人必有所执,方能有所成!

  • 🌈欢迎加入社区,福利多多哦!土豆社区
  • 🐋希望大家多多支持😘一起进步呀!

目录

BootStrap

概述及导入

BootStrap前置知识(了解)

BootStrap布局容器及栅格【阶段重点】

布局容器

​​​​​​​栅格(核心)

 BootStrap响应式工具及列表


BootStrap

概述及导入

目标:

1,知道什么是响应式开发

2,知道如何搭建bootStrap环境

为了进行敏捷开发,为了更快搭建页面,为了让书写的网页可以在各个终端进行展示

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
</body>
</html>

 

BootStrap前置知识(了解)

 

 

BootStrap布局容器及栅格【阶段重点】

​​​​​​​布局容器

目标:可以掌握BootStrap中布局系统

BootStrap必须需要至少一个布局容器,才能为页面内容进行封装和方便的样式控制。相当于一个画板。

帮助手册位置:全局CSS样式-------》概览--------》布局容器

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        要求:居中,两端有留白
    </div>
    <div class="container-fluid">
        要求:占据视口100%宽度
    </div>
</body>
</html>

布局容器:相当于BootStrap的一个画板,所有的bootStrap组件都建议放置于此。

BootStrap操作时,就是使用class进行赋值,就可以引入BootStrap样式。

​​​​​​​栅格(核心)

 

 

 

栅格是通过数格子来完成一行的布局的。

col-lg-? 在这一行占用?列

col-lg-? 书写顺序决定在这一行的占用位置

示例1: 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求:一个元素占一行-->
    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="border: 1px solid blue;">
                11111111111111
            </div>
        </div>
    </div>
</body>
</html>

 示例2:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求:三个元素平分一行-->
    <div class="container">
        <div class="row">
            <div class="col-lg-4" style="border: 1px solid blue;">
                11111111111111
            </div>
            <div class="col-lg-4" style="border: 1px solid blue;">
                22222222222222
            </div>
            <div class="col-lg-4" style="border: 1px solid blue;">
                33333333333333
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

 

 

改变视口,就相当于改变屏幕尺寸就会在 四个屏幕尺寸之间切换。 

 

若需要设置一个尺寸,同步其他屏幕,就需要设置xs

若需要设置一个尺寸,不影响其他屏幕,就需要设置lg

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求:三个元素平分一行,各个尺寸下 lg md sm xs-->
    <div class="container">
        <div class="row">
            <div class="col-xs-4" style="border: 1px solid blue;">
                11111111111111
            </div>
            <div class="col-xs-4" style="border: 1px solid blue;">
                22222222222222
            </div>
            <div class="col-xs-4" style="border: 1px solid blue;">
                33333333333333
            </div>
        </div>
    </div>
</body>
</html>

 

答案:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            11
        </div>
        <div class="col-md-6">
            22
        </div>
    </div>
</div>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求:元素居中展示
    -->
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">111111</div>
        </div>
    </div>
</body>
</html>

 BootStrap响应式工具及列表

 目标:通过学习响应式工具,熟练使用不同屏幕尺寸下,元素显示和隐藏效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求:中间元素在大尺寸屏幕可见
    -->
    <div class="container">
        <div class="row">
            <div class="col-xs-4">111111</div>
            <div class="col-xs-4 visible-lg">222222</div>
            <div class="col-xs-4">333333</div>
        </div>
    </div>
</body>
</html>

<ul class="list-inline">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 


网站公告

今日签到

点亮在社区的每一天
去签到