快速掌握-bootstrap

作者: 小二儿上酒 | 来源:发表于2021-06-16 21:45 被阅读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 学习回顾

快速掌握-bootstrap

笔记-bootstrap

是什么

布局

文本

图片

表格

表单

按钮

小标签

浮动

显示隐藏

字体图标

导航

面包屑

分页

面板

Well

iframe 自适应

进度条

弹出框

标签切换

颜色

api 文档

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读