Bootstrap入门学习笔记(只记录了效果)

基本头文件

<!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_table_basic
条纹表格挺好看 table thread标题行 tbody普通行 tr行 td单项
table class="table table-bordered" 边框表格
鼠标悬停
黑色背景表格
黑色条纹表格
鼠标悬停黑色背景表格
指定颜色

图像形状
圆角图片
椭圆图片
缩略图
可以设置对齐方式
响应式图片 class="classname1 classname2" 好！！

Jumbotron

菜鸟教程的灰框

信息提示框

vjudge上的提示框
关闭提示框
关闭提示框动画

按钮

按钮类可用于 , , 或元素上:

进度条

动画进度条

分页

可以进行分页
当前页码可以高亮表示

列表组

激活状态
禁用
链接
颜色

卡片

可以用卡片来放小说吗？
标题文本和链接牛逼！！！！
图片卡片牛逼！！！
还可以文字覆盖图片

下拉菜单

分割线
还有标题
禁用
改变方向
按钮中的下拉菜单

折叠

手风琴实例

表单

注册表单
评论模板
复选框
表单下拉菜单
输入框组大小

巴特西

Bootstrap入门学习笔记(只记录了效果)

基本头文件

容器类

文字排版

颜色

表格

图像形状

Jumbotron

信息提示框

按钮

进度条

分页

列表组

卡片

下拉菜单

折叠

导航

表单

轮播

模态框

提示框

滚动监听

弹性盒子

多媒体对象

最新文章

热门文章