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),开源 ...
随机推荐
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- Bootstrap如何禁止响应式布局
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- Zookeeper之Leader选举过程
Leader在集群中是一个非常重要的角色,负责了整个事务的处理和调度,保证分布式数据一致性的关键所在.既然Leader在ZooKeeper集群中这么重要所以一定要保证集群在任何时候都有且仅有一个Lea ...
- 【selenium】- webdriver常见元素定位（中）
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.By.tagName 遇到hidden就break,继续下一个循环. 2.By.linkText 对上图中的“糯米”进行定位: 3.By. ...
- H-Magic Line_2019 牛客暑期多校训练营（第三场）
题目连接: https://ac.nowcoder.com/acm/contest/883/H Description There are always some problems that seem ...
- CodeForces 474F Ant colony ST+二分
Ant colony 题解: 因为一个数是合法数,那么询问区间内的其他数都要是这个数的倍数,也就是这个区间内的gcd刚好是这个数. 对于这个区间的gcd来说,不能通过前后缀来算. 所以通过ST表来询问 ...
- HDU 2561 二小整数
第二小整数 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 计蒜客 ACM训练联盟周赛 第一场 Christina式方格取数 思维
助手Christina发明了一种方格取数的新玩法:在n*m的方格棋盘里,每个格子里写一个数.两个人轮流给格子染色,直到所有格子都染了色.在所有格子染色完后,计算双方的分数.对于任意两个相邻(即有公共边 ...
- codeforces 572 C. Lengthening Sticks（数学）
题目链接:http://codeforces.com/contest/572/problem/C 题意:给出a,b,c,l要求a+x,b+y,c+z构成三角形,x+y+z<=l,成立的x,y,z ...
- 如何在GitHub上上传自己的项目
此文为转载,地址:https://blog.csdn.net/m0_37725003/article/details/80904824 本文链接:https://blog.csdn.net/m0_37 ...