投稿
  1. 极客之音首页
  2. 后端漫谈

Javascript知识【BootStrap】

seven_ • • 后端漫谈 • 阅读 52

导读：本篇文章讲解 Javascript知识【BootStrap】，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

  • 🏆人必有所执，方能有所成！

  • 🌈欢迎加入社区，福利多多哦！土豆社区

  • 🐋希望大家多多支持😘一起进步呀！

目录

BootStrap

概述及导入

BootStrap前置知识（了解）

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

布局容器

​​​​​​​栅格（核心）

 BootStrap响应式工具及列表

BootStrap

概述及导入

目标：

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

2，知道如何搭建bootStrap环境

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

Javascript知识【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前置知识（了解）

Javascript知识【BootStrap】

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

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

​​​​​​​布局容器

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

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

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

Javascript知识【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:2px solid red;
        }
    </style>
</head>
<body>
    <div class=”container”>
        要求：居中，两端有留白
    </div>
    <div class=”container-fluid”>
        要求：占据视口100%宽度
    </div>
</body>
</html>

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

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

​​​​​​​栅格（核心）

 Javascript知识【BootStrap】

 Javascript知识【BootStrap】

Javascript知识【BootStrap】

Javascript知识【BootStrap】

 

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

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

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

示例1：Javascript知识【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-lg-12″ style=”border: 1px solid blue;“>
                11111111111111
            </div>
        </div>
    </div>
</body>
</html>

 示例2：Javascript知识【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-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>

 Javascript知识【BootStrap】

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

改变视口，就相当于改变屏幕尺寸就会在 四个屏幕尺寸之间切换。Javascript知识【BootStrap】 

Javascript知识【BootStrap】 

若需要设置一个尺寸，同步其他屏幕，就需要设置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>

Javascript知识【BootStrap】 

答案：

<div class=”container”>
    <div class=”row”>
        <div class=”col-md–6“>
            11
        </div>
        <div class=”col-md–6“>
            22
        </div>
    </div>
</div>Javascript知识【BootStrap】

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

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120875.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！