基本头文件

<!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入门学习笔记(只记录了效果)的更多相关文章

  1. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  2. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  3. dubbo入门学习笔记之入门demo(基于普通maven项目)

    注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...

  4. Three入门学习笔记整理

    一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...

  5. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  6. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  7. Hadoop入门学习笔记---part1

    随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

  8. Scala入门学习笔记三--数组使用

    前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...

  9. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

随机推荐

  1. poj - 1860 Currency Exchange Bellman-Ford 判断正环

    Currency Exchange POJ - 1860 题意: 有许多货币兑换点,每个兑换点仅支持两种货币的兑换,兑换有相应的汇率和手续费.你有s这个货币 V 个,问是否能通过合理地兑换货币,使得你 ...

  2. CodeForces-768B-Code For 1+DFS类似线段树思想

    Code For 1 题意:对于一个n,可以将它分解为n/2,n%2,n/2三个数字,重复上述操作知道虽有值为1或0为止: 求L---R区间数列的和: 思路:首先画着画着可以发现这是一个类似线段数的结 ...

  3. HZNU Training 1 for Zhejiang Provincial Collegiate Programming Contest

    赛后总结: TJ:今天我先到实验室,开始看题,一眼就看了一道防AK的题目,还居然觉得自己能做wwww.然后金姐和彭彭来了以后,我和他们讲了点题目.然后金姐开始搞dfs,我和彭彭看榜研究F题.想了很久脑 ...

  4. 牛客小白月赛4 I 合唱队形 思维 字符串

    链接:https://www.nowcoder.com/acm/contest/134/I来源:牛客网 题目描述 铁子的班级在毕业晚会有一个合唱节目,到了毕业晚会的时候,他们必须排成一排一起合唱&qu ...

  5. 字符编码与gcc 编译器的编码问题

    最近在 vscode 中借助 gcc 编译器来配置 c 语言开发环境时,发现中文编码存在乱码问题.再加上最近学习到多字节字符与宽字符,搅在一起,搞得很乱,就把自己的理解写下来,供有需者参考吧. 1. ...

  6. gitlab版本管理小白入门

    在新公司入职已经一周了,由于刚好在版本空档期,没有什么开发任务,就自己熟悉熟悉代码什么的. 目前公司用的是git,原来公司用的是svn,今天就记录下从小白入门. gitlab分布式版本管理,理论介绍就 ...

  7. 【Offer】[10-1] 【斐波那契数列】

    题目描述 思路分析 Java代码 代码链接 题目描述  大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). 思路分析 递归的思路,会出现很多重复的 ...

  8. CentOS7.6中mysql实践

    cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 使用:yum -y install mysql mysql-server 安装 ...

  9. 从原理层面掌握@InitBinder的使用【享学Spring MVC】

    每篇一句 大魔王张怡宁:女儿,这堆金牌你拿去玩吧,但我的银牌不能给你玩.你要想玩银牌就去找你王浩叔叔吧,他那银牌多 前言 为了讲述好Spring MVC最为复杂的数据绑定这块,我前面可谓是做足了功课, ...

  10. Vue 利用指令实现禁止反复发送请求

    前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求. 假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据.那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时 ...