bootstrap_开始

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）

猜你喜欢