WEB开发-Bootstrap框架、响应式开发

相见恨晚,这框架真好用呜呜(๑•̀ㅂ•́)و✧

目录

    • 响应式开发原理
    • 响应式布局容器
    • 网站: https://v3.bootcss.com
    • Bootstrap 前端开发框架
    • 布局容器
    • 栅格系统
    • 栅格选项参数
    • 列嵌套
    • 列偏移
    • 列排序
    • 响应式工具

响应式开发原理

WEB开发-Bootstrap框架、响应式开发_第1张图片

响应式布局容器

WEB开发-Bootstrap框架、响应式开发_第2张图片




    
    
    响应式开发
    


    
    
"container">

效果:
大屏
WEB开发-Bootstrap框架、响应式开发_第3张图片
缩小窗口
WEB开发-Bootstrap框架、响应式开发_第4张图片
一个小案例~
WEB开发-Bootstrap框架、响应式开发_第5张图片




    
    
    Document
    


    
"container">
  • 导航栏
  • 导航栏
  • 导航栏
  • 导航栏
  • 导航栏
  • 导航栏
  • 导航栏
  • 导航栏

效果:
大屏
在这里插入图片描述
缩小窗口
WEB开发-Bootstrap框架、响应式开发_第6张图片

网站: https://v3.bootcss.com

在这个网站下载
WEB开发-Bootstrap框架、响应式开发_第7张图片
WEB开发-Bootstrap框架、响应式开发_第8张图片
WEB开发-Bootstrap框架、响应式开发_第9张图片

Bootstrap 前端开发框架

WEB开发-Bootstrap框架、响应式开发_第10张图片

布局容器

WEB开发-Bootstrap框架、响应式开发_第11张图片


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="IE=edge">
    
    
    "stylesheet" href="bootstrap/css/bootstrap.min.css">
    Document
    


    
    
"btn btn-primary login">登录
"btn btn-danger">未成功

WEB开发-Bootstrap框架、响应式开发_第12张图片

栅格系统

把container划分成十二等分的列,模块化页面布局。

注:多行写 按住alt +鼠标
WEB开发-Bootstrap框架、响应式开发_第13张图片

栅格选项参数

WEB开发-Bootstrap框架、响应式开发_第14张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        /* 这里都还没学呜呜┭┮﹏┭┮ */
        [class^="col"] {
     
            border: 1px solid #ccc;
        }
        /* 选择第一行 */
        .container .row:nth-child(1) {
     
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个container 的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <br>

        <!-- 如果孩子的分数相加 小于12 则会? 则占不满整个container的宽度 会有空包 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <br>

        <!-- 如果孩子的分数相加 小于12 则会? 多余的那一列会另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>
</html> 

lg
WEB开发-Bootstrap框架、响应式开发_第15张图片
md
WEB开发-Bootstrap框架、响应式开发_第16张图片
sm
WEB开发-Bootstrap框架、响应式开发_第17张图片
xs
WEB开发-Bootstrap框架、响应式开发_第18张图片

列嵌套

.col-sm-*
WEB开发-Bootstrap框架、响应式开发_第19张图片

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <!-- 我们列嵌套最好加一个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样 -->
                <div class="col-md-4">a</div>
                <div class="col-md-8">b</div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        
    </div>
</body>

列偏移

未完待续…
我太懒了呜呜这么点到现在还没写完

我来更新啦

.col-md-offset-*
WEB开发-Bootstrap框架、响应式开发_第20张图片

<div class="container">
        <div class="row">
            <div class="col-lg-3">左侧</div>
            <!-- 偏移的份数是12-两个盒子的份数加起来 -->
            <div class="col-lg-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子 那么就偏移 = 12 - 8 / 2 -->
            <div class="col-lg-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>

在这里插入图片描述

列排序

WEB开发-Bootstrap框架、响应式开发_第21张图片

<div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-push-8">左侧</div>
            <div class="col-lg-8 col-lg-pull-4">右侧</div>
        </div>
    </div>

在这里插入图片描述

响应式工具

WEB开发-Bootstrap框架、响应式开发_第22张图片

<div class="container">
        <div class="row">
            <div class="col-xs-3">1
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">我会变魔术噢</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

lg、sm都是这样
在这里插入图片描述
md、xs都是这样
在这里插入图片描述
差不多就学到了这里啦~
后续可能会添加一个案例~

你可能感兴趣的:(Web,html5,css3,bootstrap)