基本头文件

<!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. OpenCvSharp 通过特征点匹配图片

    现在的手游基本都是重复操作,一个动作要等好久,结束之后继续另一个动作.很麻烦,所以动起了自己写一个游戏辅助的心思. 这个辅助本身没什么难度,就是通过不断的截图,然后从这个截图中找出预先截好的能代表相应 ...

  2. Linux的基本操作（一）

    一.Linux的常用命令 1.ls[参数] 目录或文件 参数 -a :显示指定目录下的所有子目录与文件,包括隐藏文件: -l 以长格式显示文件的详细信息 如图: 文件类型:“-“表示常规文件:”d&q ...

  3. hihocoder [Offer收割]编程练习赛18 C 最美和弦（dp）

    题目链接:http://hihocoder.com/problemset/problem/1532 题解:一道基础的dp,设dp[i][j][k][l]表示处理到第几个数,当前是哪个和弦错了几次初始x ...

  4. [NOI2009]诗人小G 四边形优化DP

    题目传送门 f[i] = min(f[j] + val(i,j); 其中val(i,j) 满足 四边形dp策略. 代码: #include<bits/stdc++.h> using nam ...

  5. Codeforces Round #383 (Div. 2)D. Arpa's weak amphitheater and Mehrdad's valuable Hoses（dp背包+并查集）

    题目链接 :http://codeforces.com/contest/742/problem/D 题意:给你n个女人的信息重量w和美丽度b,再给你m个关系,要求邀请的女人总重量不超过w 而且如果邀请 ...

  6. 牛客暑假多校 F RIKKA with Line Graph

    题意: 现在有一副完全图, 将他转化成线图. 线图就是 把原来的图上的边都变成点, 然后如果原来的任意2条边存在公共点, 他们就会有一条边, 边权为原来的2条边的和. 最后求出线图中的任意2点的最短路 ...

  7. codeforces 807 E. Prairie Partition（贪心+思维）

    题目链接:http://codeforces.com/contest/807/problem/E 题意:已知每个数都能用x=1 + 2 + 4 + ... + 2k - 1 + r (k ≥ 0, 0 ...

  8. javascript合并两个数组

    在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现. var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; // 将arr1和arr2合并成为[ ...

  9. print.js继承原有样式

    npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...

  10. 使用DevExpress的PdfViewer实现PDF打开、预览、另存为、打印(附源码下载)

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...