Bootstrap

支持响应式布局:同一套页面兼容不同分辨率设备,下载:点击–>Bootstrap

模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap HelloWorld</title>

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


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello World</h1>

</body>
</html>

响应式布局

  • 实现:依赖栅格系统,将一行平均分为12个格子,可以指定元素占几个格子
  • 步骤:
    1. 定义容器,相当于(table)
      1. container: 两边有留白
      2. container-fluid:100%宽度
    2. 定义行,相当于(tr),样式是row
    3. 定义元素,指定该元素在不同设备上所占的格子数目,样式是col-设备代号-格子数目
      • 设备代号
        1. xs:超小屏幕(<768px)
        2. sm:小屏幕(>=768px)
        3. md:中等屏幕(>=992px)
        4. lg:大屏幕(>=1200px)
    4. 注意
      1. 一行中格子数超过12,自动换行
      2. 栅格类属性向上兼容
      3. 向下不兼容,如果设置的设备宽度小于了设置的栅格类属性的设备代码最小值,会一个元素占满一整行

CSS样式和JS插件

  1. 全局CSS样式
    • 按钮:class=”btn btn-default”
    • 图片:
      • class=”img-responsive”:图片在任意尺寸都占100%
      • 图片形状
        1
        2
        3
        <img src="..." alt="..." class="img-rounded">:方形
        <img src="..." alt="..." class="img-circle"> : 圆形
        <img src="..." alt="..." class="img-thumbnail"> :相框
    • 表格
      • table
      • table-bordered
      • table-hover
    • 表单
      • 给表单项添加:class=”form-control”
  2. 组件
    • 导航条
    • 分页条
  3. 插件
    • 轮播图

CSS教程查看—>BootstrapCSS教程

JavaScript教程—>BootstrapJavaScript教程

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Ajax和Json

DataTables

Sweetalert2

zTree使用

Vue

前端模块化