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),开源 ...
随机推荐
- Joda学习笔记
Joda Time简介 日常业务开发中,经常需要处理日期.比如:获取当前一个月之内的开播记录,获取十分钟之内的红包记录等等.我们之前是用java.util.Calendar实现的,直到我看到占小 ...
- 第三篇 视觉里程计（VO）的初始化过程以及openvslam中的相关实现详解
视觉里程计(Visual Odometry, VO),通过使用相机提供的连续帧图像信息(以及局部地图,先不考虑)来估计相邻帧的相机运动,将这些相对运行转换为以第一帧为参考的位姿信息,就得到了相机载体( ...
- Contour 学习笔记（二）：使用级联功能实现蓝绿部署和金丝雀发布
上篇文章介绍了 Contour 分布式架构的工作原理,顺便简单介绍了下 IngressRoute 的使用方式.本文将探讨 IngressRoute 更高级的用法,其中级联功能是重点. 1. Ingre ...
- [python]通过微信公众号“Python程序员”，编写python代码
今天发现微信公众号中,居然可以编写python代码,很是惊喜,觉得蛮有趣的. 步骤如下: 1.关注微信公众号“Python程序员” 2.关注成功后,点击右下角的“潘多拉”->"Pyth ...
- 洛谷 P1070 道路游戏 DP
P1070 道路游戏 题意: 有一个环,环上有n个工厂,每个工厂可以生产价格为x的零钱收割机器人,每个机器人在购买后可以沿着环最多走p条边,一秒走一条,每条边不同时间上出现的金币是不同的,问如何安排购 ...
- 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 ...
- 【LeetCode】[0001] 【两数之和】
题目描述 思路分析 Java代码 代码链接 题目描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个整数,并返回他们的数组下标.你可以假设每种输入只会对 ...
- java第一次测验
package kaoshi; import java.util.Scanner; public class ScoreManagement { static int t=0; static int ...
- String字符串关于==的详解
String详解 字符创建方式 字符串创建有两种方式 String s = new String("myString"); String string2 = "myStr ...
- NOIP2009 1.多项式输出
题目: 其中,aixi称为 i 次项,ai 称为 i 次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该多项式: 1. 多项式中自变量为 x,从左到右按照次数递减顺序给出多 ...