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上的提示框
  • 关闭提示框
  • 关闭提示框动画

按钮

进度条

  • 动画进度条

分页

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

列表组

  • 激活状态
  • 禁用
  • 链接
  • 颜色

卡片

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

下拉菜单

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

折叠

  • 手风琴实例

导航

  • 选项卡
  • 胶囊导航
  • 都有下拉菜单
  • 动态选项卡

表单

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

轮播

模态框

  • 设置，让你提交的

提示框

滚动监听

提醒章节

弹性盒子

可以左对齐 右对齐

多媒体对象

  • 基础多媒体对象可以有
posted @ 2019-09-29 16:20  NTS100K  阅读(210)  评论(0)    收藏  举报
浏览器标题切换end