基本头文件
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
</body>
</html>
容器类
container 固定宽度支持相应布局的容器
container-fluid 类似于100%宽度，占全部视窗的容器
display这个字体有点好看，可以使用。
文字排版
- display 标题样式
- small 小文本
- mark 高亮
- abbr 虚线边框
- dl 二级标题
- code 代码
- kdb 按键高亮
- pre 文本段
- 左对齐 文本
颜色
- https://www.runoob.com/try/try.php?filename=trybs4_txt_colors
- 背景颜色https://www.runoob.com/try/try.php?filename=trybs4_txt_bgcolors
表格
-
https://www.runoob.com/try/try.php?filename=trybs4_table_basic
-
条纹表格 挺好看 table thread标题行 tbody普通行 tr行 td单项
-
table class="table table-bordered" 边框表格
-
鼠标悬停
-
黑色背景表格
-
黑色条纹表格
-
鼠标悬停 黑色背景表格
-
指定颜色
图像形状
-
圆角图片
-
椭圆图片
-
缩略图
-
可以设置对齐方式
-
响应式图片 class="classname1 classname2" 好！！
Jumbotron
- 菜鸟教程的灰框
信息提示框
- vjudge上的提示框
- 关闭提示框
- 关闭提示框动画
按钮
进度条
- 动画进度条
分页
- 可以进行分页
- 当前页码可以高亮表示
列表组
- 激活状态
- 禁用
- 链接
- 颜色
卡片
- 可以用卡片来放小说吗？
- 标题文本和链接 牛逼！！！！
- 图片 卡片 牛逼！！！
- 还可以文字覆盖图片
下拉菜单
- 分割线
- 还有标题
- 禁用
- 改变方向
- 按钮中的下拉菜单
折叠
- 手风琴实例
导航
- 选项卡
- 胶囊导航
- 都有下拉菜单
- 动态选项卡
表单
- 注册表单
- 评论模板
- 复选框
- 表单下拉菜单
- 输入框组 大小
轮播
模态框
- 设置，让你提交的
提示框
滚动监听
提醒章节
弹性盒子
可以左对齐 右对齐
多媒体对象
- 基础多媒体对象可以有