快速掌握-bootstrap

2021-06-16 本文已影响0人小二儿上酒

笔记-bootstrap

是什么

bootstrap 前端开发框架，可以快速的搭建 web 页面。

框架分为响应式布局和非响应式布局。响应式布局通过不定宽和media 查询实现，非响应式布局通过 12 列栅格化形成形成类似的表格布局。非响应式布局默认最大宽度为 1170 px。

说是页面框架，就需要一些固定布局和样式的支持，常用的模块

弹框
表单
按钮

布局

分为响应式布局和非响应式布局。

响应式布局(流式布局)：会随着浏览器的窗口变化而调整页面布局，会自动撑满父元素 div。默认类名后添加 "-fluid"
非响应式布局：不会随着浏览器的窗口变化而调整页面布局，默认是 12 列栅格化布局，就是把页面分成 12 列，通过这个 12 列的容器，可以形成类似表格的布局方式。
非响应式布局默认最大宽度是 1170px; 响应式的宽度默认是 100%；在 bootstrap 中当页面的宽度小于 760px 的时候，会自动调整为宽度 100% 实现垂直方向的堆叠效果。
非响应式布局适合内容比较集中，只有一块内容区域的页面
响应式布局适合内容比较分散的页面

<div class="container"></div>

// row
<div class="row">
  <div class="col-xs-12 col-md-8">.col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-md-4</div>
  <div class="col-xs-6 col-md-offset-3">33333</div>
</div>

// 栅格的嵌套
<div class="row show-grid">
  <div class="span6">
    <div class="row">
      <div class="span9">A</div>
    </div>
  </div>
  <div class="span6">C</div>
</div>

// 栅格偏移offset
<div class="row show-grid">
  <div class="span3">A</div>
  <div class="span3 offset3">A</div>
</div>

// 对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

// 列表：（标签） 无序：ul 有序：ol 列表项：li
无样式列表（类名）：unstyled（只对直接子节点有效）
行内列表（类名）：inline（效果是让列表同行显示，并有间隔）；

<ul class="list-inline">
  <li>...</li>
</ul>

父：dl 着重/标题：dt 普通：dd
水平描述（类名，加到父）：dl-horizontal（效果是着重右对齐，普通左对齐，着重和描述对应的开始行在同一行）
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

// 自动截断 text-overflow

文本

文本前缀：text -
背景前缀：bg-

// 文本
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

// 背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

// 居中
<div class="center-block">...</div>

图片

<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

// 缩略图
<a href="#" class="thumbnail">
    <img src="..." alt="...">
</a>

表格

// tbody内部，斑马样式，奇数行加重颜色：table-striped
// 表格边框：table-bordered
// 鼠标悬停样式：table-hover
// 表格内部更紧凑（行高更少）：table-condensed
<table class="table">
    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>
</table>

表单

// 非内联
<div class="form-group">
  <label for="exampleInputEmail1">邮箱地址</label>
  <input
    type="email"
    class="form-control"
    id="exampleInputEmail1"
    placeholder="Email"
  />
</div>

// 内联
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail2"
      placeholder="jane.doe@example.com"
    />
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

// 输入框 input-group-sm
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input
    type="text"
    class="form-control"
    placeholder="Username"
    aria-describedby="basic-addon1"
  />
</div>

// radio
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1" /> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3" /> 3
</label>

// 下拉框
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

// 禁用状态
<input
  class="form-control"
  id="disabledInput"
  type="text"
  placeholder="Disabled input here..."
  disabled
/>

// 控制尺寸
<input class="form-control input-lg" type="text" placeholder=".input-lg" />
<input class="form-control" type="text" placeholder="Default input" />
<input class="form-control input-sm" type="text" placeholder=".input-sm" />

<select class="form-control input-lg">
  ...
</select>
<select class="form-control">
  ...
</select>
<select class="form-control input-sm">
  ...
</select>

按钮

btn btn-default btn-lg （最大） btn btn-primary btn-sm （小） btn btn-success
btn-xs （超小） btn btn-info btn-block（块级） btn btn-danger active（激活） btn
btn-warning btn btn-link disabled="disabled" (禁用) // 关闭按钮
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

// 三角符号
<span class="caret"></span>

// 按钮组
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

小标签

// 小提示
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

// 小标签
<a href="#">Inbox <span class="badge">42</span></a>

// 警告框
<div class="alert alert-success alert-dismissible" role="alert">
  ...
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

<div class="clearfix">...</div>

显示隐藏

<div class="show">...</div>
<div class="hidden">...</div>

字体图标

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

// 导航 nav-pills nav-stacked nav-justified
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class="disabled"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

// 导航组件 navbar-fixed-top（固定顶部） navbar-fixed-bottom（固定底部）
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="..." />
      </a>
    </div>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

面包屑

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

// 分页 pagination-lg pagination-sm
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <li class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">Panel content</div>
</div>

Well

// well-lg well-sm
<div class="well">...</div>

iframe 自适应

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

进度条

// progress-bar-success progress-bar-info progress-bar-warning
progress-bar-danger // progress-bar-striped // 多个进度条
<div class="progress">
  <div
    class="progress-bar progress-bar-success"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%;"
  >
    60%
  </div>
</div>

// 单个进度条
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div
    class="progress-bar progress-bar-warning progress-bar-striped"
    style="width: 20%"
  >
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

弹出框

// bs-example-modal-lg bs-example-modal-sm

<button
  type="button"
  class="btn btn-primary btn-lg"
  data-toggle="modal"
  data-target="#myModal"
>
  弹出框
</button>

<!-- 弹框 -->
<div
  class="modal fade bs-example-modal-sm"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  // 方法调用
  $("#myModal").modal("show");
  $("#myModal").modal("hide");
  $("#myModal").modal("toggle");
</script>

标签切换

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"
        >Profile</a
      >
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"
        >Messages</a
      >
    </li>
    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"
        >Settings</a
      >
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>

<script>
  // 方法调用
  $("#myTabs a").click(function (e) {
    e.preventDefault();
    $(this).tab("show");
  });
  $('#myTabs a[href="#profile"]').tab("show"); // Select tab by name
  $("#myTabs a:first").tab("show"); // Select first tab
  $("#myTabs a:last").tab("show"); // Select last tab
  $("#myTabs li:eq(2) a").tab("show"); // Select third tab (0-indexed)
</script>

颜色

txt-color-red bg-color-green bg-color-blue bg-color-orange bg-color-pink
no-padding 变绿：success 红：error 黄：warning 蓝：info

api 文档

官方文档 - https://v3.bootcss.com/
w3cshool.cc - http://home.ustc.edu.cn/~xie1993/bootstrap/bootstrap-tutorial.html

总结

笔记方式总结，目的常用api 学习回顾