1+X | BootStrap

0
tec

认识bootstrap框架

bootstrap是一个开源的UI（界面设计）框架，没有UI图且需要做响应式网站开发时，可以使用它。

什么是响应式网站？

一套代码可以用在多个平台（端），如果不用BS实现响应式网站开发，就只能使用媒体查询实现。媒体查询的关键词有max-width,min-width,not,only,and，没有or。

优点

  • 响应式设计
  • 移动设备优先
  • 主流浏览器都支持
  • 开源
  • 提供全面的组件
  • 内置jquery插件
  • 支持html5、css3
  • 支持LESS动态样式

导入

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

媒体查询 - 响应式设计

  • 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
  • @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
  • screen - 表示所有设备
  • 关键词 - max-width、min-width、only、not、and

全局CSS样式 - https://v3.bootcss.com/css/#top

布局容器

  • .container - 类用于固定宽度并支持响应式布局的容器。
<div class="container">
  ...
</div>
  • .container-fluid - 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
  ...
</div>

栅格系统 - https://v3.bootcss.com/css/#grid

  • 系统会自动分为最多12列

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

  • 栅格系统的标准写法

    <div class="container">
  <div class="row">
    <div class="col-*-*">
      ...
    </div>
  </div>
</div>

  • container只能写在外层，一个页面可以有一个或多个，.row中可以有.col或.row,.col中可以有.col或.row

  • 栅格系统中的偏移 - .col-*-offset-*

  • .col-xs- - 超小屏幕（手机，<768px）

  • .col-sm- - 小屏幕（平板，>=768px）

  • .col-md- - 中等屏幕（桌面显示器，>=992px）

  • .col-lg- - 大屏幕（大桌面显示器，>=1200px）

  • 例 - visible-md-8 hidden-xs

列表

  • list-unstyled - 无样式列表

  • list-inline - 内联列表

  • dl-horizontal - 水平排列的描述

    image-20201117135047900

    <dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

表格 - https://v3.bootcss.com/css/#tables

  • .table - 基本表格
  • .table-striped - 条纹的表格
  • .table-bordered - 带边框的表格
  • .table-hover - 鼠标悬停
  • .table-condensed - 紧缩表格
  • .active\.success\.info\.warning\.danger - 状态类
  • .table-responsive - 响应式表格

表单 - https://v3.bootcss.com/css/#tables

  • .form-inline - 内联表单

按钮

  1. 预定义样式
  • .btn
  • .btn-default
  • .btn-primary
  • .btn-danger - 红
  • .btn-warning - 黄
  • .btn-link
  • .btn-success
  • .btn-info
  1. 大小
  • .btn-xs-
  • .btn-sm-
  • .btn-lg-

图片

  • .img-responsive - 响应式图片
  • .img-circle - 圆形
  • .img-rounded - 圆角
  • .img-thumbnail - 圆角边框

轮播图

情景文本颜色

image-20201117135939866

<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>

组件 - https://v3.bootcss.com/components/

JS插件 - https://v3.bootcss.com/javascript/


918 字