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_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上的提示框
- 关闭提示框
- 关闭提示框动画
按钮
进度条
- 动画进度条
分页
- 可以进行分页
- 当前页码可以高亮表示
列表组
- 激活状态
- 禁用
- 链接
- 颜色
卡片
- 可以用卡片来放小说吗？
- 标题文本和链接 牛逼！！！！
- 图片 卡片 牛逼！！！
- 还可以文字覆盖图片
下拉菜单
- 分割线
- 还有标题
- 禁用
- 改变方向
- 按钮中的下拉菜单
折叠
- 手风琴实例
导航
- 选项卡
- 胶囊导航
- 都有下拉菜单
- 动态选项卡
表单
- 注册表单
- 评论模板
- 复选框
- 表单下拉菜单
- 输入框组 大小
轮播
模态框
- 设置，让你提交的
提示框
滚动监听
提醒章节
弹性盒子
可以左对齐 右对齐
多媒体对象
- 基础多媒体对象可以有
Bootstrap入门学习笔记(只记录了效果)的更多相关文章
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
- Three入门学习笔记整理
一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
- Scala入门学习笔记三--数组使用
前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...
- OpenCV入门学习笔记
OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...
随机推荐
- 生产环境中Redis的key的设计
问题:如果我们需要将MySql表的数据存储到Redis中该如何存储? 例如:有t_user表 id username email 11 leo leo@163.com 22 laymans ...
- Keras（五）LSTM 长短期记忆模型 原理及实例
LSTM 是 long-short term memory 的简称, 中文叫做 长短期记忆. 是当下最流行的 RNN 形式之一 RNN 的弊端 RNN没有长久的记忆,比如一个句子太长时开头部分可能会忘 ...
- SCRUM MASTER检查单
转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-18 一位合格的ScrumMaster通常能够同时处 ...
- SCRUM的五个事件
转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-7 Scrum 使用固定的事件来产生规律性,以此来减 ...
- JOBDU 1109 连通图
题目1109:连通图 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4192 解决:2224 题目描述: 给定一个无向图和其中的所有边,判断这个图是否所有顶点都是连通的. 输入: 每组数据 ...
- lightoj 1095 - Arrange the Numbers（dp+组合数）
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1095 题解:其实是一道简单的组合数只要推导一下错排就行了.在这里就推导一下错排 ...
- 工程点点app爬虫和sign算法破解
这世界真的什么人都有,哎,继续分析. 通过对工程点点的逆向和抓包分析,发现工程点点需要x-sign和token验证. this.b.a(aVar.b("Accept", " ...
- 关于C语言\b \t \n及转义序列的理解
转义序列 说明 \b 后退一格(Backspace) \t 水平制表(Tab=4个空格) \v 垂直制表 \r 回车(Enter) \f 换页 \a 发出鸣响 \n 换行 \" 输出/输入双 ...
- HDU 1223 还是畅通工程（最小生成树prim模板）
一个很简单的prim模板,但虽然是模板,但也是最基础的,也要脱离模板熟练打出来 后期会更新kruskal写法 #include<iostream> #include<cstdio&g ...
- 实现一个基于码云Storage
实现一个简单的基于码云(Gitee) 的 Storage Intro 上次在 asp.net core 从单机到集群 一文中提到存储还不支持分布式,并立了一个 flag 基于 github 或者 开源 ...