Javascript知识【BootStrap】

2023-10-19 29

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Javascript知识【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>

2d8dd61b85354d31ac3801ba4f231726 (1).png

<!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>

Javascript知识【BootStrap】

BootStrap

概述及导入

BootStrap前置知识（了解）

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

布局容器

栅格（核心）

BootStrap响应式工具及列表

热门文章

最新文章

相关课程

相关电子书

相关实验场景