bootstrap_开始

发布时间：2020-12-17 20:46:59 所属栏目：安全来源：网络整理

导读：bootstrap 一个移动设备优先 UI 库，底层是用 less 写的，依赖于 jQuery。面试点： bootstrap 的所有盒子都是怪异盒子模型（box-sizing: border-box） bootstrap 不论是流体容器，还是固定容器，都有左右 padding 15px bootstrap 的固定容器左右 ma

bootstrap

一个移动设备优先 UI 库，底层是用 less 写的，依赖于 jQuery。

面试点：

bootstrap 的所有盒子都是怪异盒子模型（box-sizing: border-box）
bootstrap 不论是流体容器，还是固定容器，都有左右 padding 15px
bootstrap 的固定容器左右 margin 会自适应变化，因为在范围内固定了 width，并居中了
bootstrap 通过三个点将屏幕分成 4 个区域

www.bootcss.com?bootstrap3 目前最常用，有 bootstrap2 、bootstrap4（less 转换成了 sass）

思想上的框架? ? MVC? ? MVVM

应用上的框架

《JavaScript 编程思想》

《你不知道的 JavaScript》

《JavaScript 高级编程》三部曲

jekyll 或者 hexo 搭建个人博客

Yarn 依赖 NPM 管理工具

webpack 代码打包压缩构建工具

bootstrap 可视化布局 Layoutlt

bootCDN 提供免费的 CDN 加速服务（同时支持 http 和 https）

基本模版

<!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.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!--[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]-->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email?protected]/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email?protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Normalize.css 重置 css 样式
class="container-fluid"? ? 流体容器（横向充满屏幕）
class="container"? ? 固定容器

栅格系统

通过一系列的行（class="row"）与列（class="column"）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

行

.row 必须在 .container 或者 .container-fluid 中

列? ? ? ? ? ? ? ? 6 为屏份数? ? ? ? 默认共 12 屏份

.col-lg-6? ? ?（large）大屏区域

.col-md-6? ?（middle）?

.col-sm-6? ?（small）

.col-xs-6? ? （middle）??

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!