【体系-单体架构】03-视图展示架构Bootstrap

最新推荐文章于 2022-04-04 19:32:43 发布

山维

最新推荐文章于 2022-04-04 19:32:43 发布

阅读量151

点赞数

分类专栏：架构演化文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_35162536/article/details/106418761

版权

架构演化专栏收录该内容

25 篇文章 0 订阅

订阅专栏

01 Bootstrap简介

简介：Bootstrap 是基于 HTML、CSS、JavaScript 的前端框架( CSS/HTML 框架)。其外，Bootstrap 还提供了优雅的 HTML 和 CSS 规范
特点：移动设备优先(框架包含了贯穿于整个库的移动设备优先的样式)；响应式设计(响应式 CSS 能够自适应于台式机、平板电脑和手机)；为开发创建接口提供了一个简洁统一的解决方案；包含功能强大的内置组件，易于定制
技术选型：搜索量(例如：百度指数)>社区活跃度(github star>1w&issues)>开源与否

02 Bootstrap安装

注意：Bootstrap 4不支持IE 8版本
文件/目录结构：
在这里插入图片描述
示例：Bootstrap官网地址

03 Bootstrap网格布局

简介：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列
网格：在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法
前端思想：渐进增强(向上兼容)，即先保证所有浏览器字能显示再渲染特效；优雅降级(向下兼容)，即先满足最新最强浏览器的效果
布局发展：表格(table)布局(问题：必须表格里内容加载完才会显示)>div+css布局(特点：代码从上往下执行，问题：操作比较复杂)
网格系统规则：行放置在 .container class内，列放置在 .row class内。一般.row放置在.container内
网格选项：

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
各设备对应Class 前缀：手机(微型) > .col-xs-；平板电脑(小型) > .col-sm-；台式电脑(中型) > .col-md-；台式电脑(大型) > .col-lg-

示例展示：
在这里插入图片描述

04 Bootstrap媒体查询

简介：媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果(CSS 3新特性)
媒体类型：媒体类型在 CSS2 中是一个常见属性，可以通过媒体类型对不同设备指定不同样式，其中Screen(电脑显示器)、All(所有设备)、Print(打印用纸或打印预览视图)为最常见的三种媒体类型
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        .my_div {
            border: 1px solid red;
        }

        @media screen and (max-width: 480px){
            .my_div {
                border: 1px solid dodgerblue;
            }
        }
    </style>
</head>
<body>

   <div class="container">
     <div class="row">
       <div class="col-md-6 col-sm-6" style="border: 1px solid orange;">手机设备启用sm</div>
       <div class="col-md-6 col-sm-6" style="border: 1px solid orange;">电脑设备齐总md</div>
     </div>
   </div>
   
   <div class="my_div">
       展示 媒体查询 功能
   </div>

    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="assets/plugins/jquery-3.3.1.min.js"/>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"/>
</body>
</html>