·Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

·Bootstrap4 CDN

<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">

Bootstrap4核心css库

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

jQuery文件,在bootstrap.min.js前引入

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js

<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap4 核心 JavaScript 文件

·Bootstrap 4 需要一个容器元素来包裹网站的内容。

两个容器类:

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

Bootstrap4 网格系统

·Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

我们也可以根据自己的需要,定义列数

·Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

·Bootstrap4 网格系统规则:

1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。

2、使用行来创建水平的列组。

3、内容需要放置在列中,并且只有列可以是行的直接子节点。

4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

6、网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。

文字排版

display标签可写出一些更大的标题

small标签可写出更小的

mark高亮

blockquote引用的内容

更多排版类:https://www.runoob.com/bootstrap4/bootstrap4-typography.html

一些字体颜色

<div class="container">

<h2>代表指定意义的文本颜色</h2>

<p class="text-muted">柔和的文本。</p>

<p class="text-primary">重要的文本。</p>

<p class="text-success">执行成功的文本。</p>

<p class="text-info">代表一些提示信息的文本。</p>

<p class="text-warning">警告文本。</p>

<p class="text-danger">危险操作文本。</p>

<p class="text-secondary">副标题。</p>

<p class="text-dark">深灰色文字。</p>

<p class="text-light">浅灰色文本(白色背景上看不清楚)。</p>

<p class="text-white">白色文本(白色背景上看不清楚)。</p>

</div>

一些链接颜色:

<div class="container">

<h2>文本颜色</h2>

<p>鼠标移动到链接。</p>

<a href="#" class="text-muted">柔和的链接。</a>

<a href="#" class="text-primary">主要链接。</a>

<a href="#" class="text-success">成功链接。</a>

<a href="#" class="text-info">信息文本链接。</a>

<a href="#" class="text-warning">警告链接。</a>

<a href="#" class="text-danger">危险链接。</a>

<a href="#" class="text-secondary">副标题链接。</a>

<a href="#" class="text-dark">深灰色链接。</a>

<a href="#" class="text-light">浅灰色链接。</a>

</div>

表格:

https://www.runoob.com/bootstrap4/bootstrap4-tables.html

Bootstrap4 Jumbotron

Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息

按钮:

<button type="button" class="btn btn-outline-primary">主要按钮</button> <button type="button" class="btn btn-outline-secondary">次要按钮</button> <button type="button" class="btn btn-outline-success">成功</button> <button type="button" class="btn btn-outline-info">信息</button> <button type="button" class="btn btn-outline-warning">警告</button> <button type="button" class="btn btn-outline-danger">危险</button> <button type="button" class="btn btn-outline-dark">黑色</button> <button type="button" class="btn btn-outline-light text-dark">浅色</button>

进度条:

https://www.runoob.com/bootstrap4/bootstrap4-progressbars.html

列表:

https://www.runoob.com/bootstrap4/bootstrap4-progressbars.html

卡片:

https://www.runoob.com/bootstrap4/bootstrap4-cards.html

Bootstrap4一些零散的知识点的更多相关文章

  1. Maven一些零散的知识点

    Maven常用命令: 1. 创建Maven的普通java项目: mvn archetype:create -DgroupId=com.yida.framework -DartifactId=hello ...

  2. JavaScript 零散知识点1 (正则表达式+定时器+hover)

    1.clear:both清楚浮动影响//css中 2.正则表达式 search方法 :指明是否存在相应的匹配,如找到一个返回一个整数值,表明这个匹配距离字符串开始的偏移位置,如果没有找到匹配返回-1f ...

  3. 零散知识点总结(持续更新……)

        这篇博客用于记录平时学习中遇到的零散的知识点,它们不适于单独写一篇长博客,在这里记录下来一是为了增强记忆,二是为了方便复习总结.这篇博客会持续更新... 一.JS数据类型及类型判断 1. JS ...

  4. Linux,Mac下MySQL的安装及一些知识点的整理

    Linux下载安装 在服务器上下载的话,需要安装Mysql5.7相关的yum源 wget https://dev.mysql.com/get/mysql80-community-release-el7 ...

  5. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  6. IT技术学习指导之Linux系统入门的4个阶段(纯干货带图)

    IT技术学习指导之Linux系统入门的4个阶段(纯干货带图) 全世界60%的人都在使用Linux.几乎没有人没有受到Linux系统的"恩惠",我们享受的大量服务(包括网页服务.聊天 ...

  7. 【OPENGL】第三篇 着色器基础(二)

    在这一小节,主要学习GLSL的基本数据类型以及控制结构.GLSL具备了C++和Java的很多特性,我们会先了解所有着色阶段共有的特性,再了解各个着色器的专属特性. 1.着色器的基本结构 一个着色器程序 ...

  8. 前端工作面试问题--摘取自github

    前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...

  9. 如何自学Android

    看到很多人提问非科班该如何学习编程,其实科班也基本靠自学.有句话叫"师傅领进门修行靠个人",再厉害的老师能教你的东西都是很有限的,真正的修行还是要靠自己.博主本科是数学专业,虽研究 ...

随机推荐

  1. 博客圆美化主题推荐之Slience

    博客圆美化主题推荐之Slience 一.前言 本博客美化主题作者为:Esofar,本文仅在教导如何快速把该美化主题应用到自己的博客中,详细部署内容见Silence - 专注于阅读的博客园主题. 二.博 ...

  2. MSSqlServer访问远程数据库

    --第一部分(要点)--永久访问方式(需对访问远程数据库进行经常性操作)时设置链接数据库Exec sp_addlinkedserver 'MyLinkServer','','SQLOLEDB','远程 ...

  3. VFP9利用_GdiPlus类处理图片分辨率及缩放

    VFP利用GDI来处理图片,已经不是一件太难的事了.GdiPlus类就是专门来干这事的,有关其属性等请参考其它资料.下面将处理图片缩放及分辨率的代码示例贴出来.这些代码都是很久以前的了,由于新冠宅家无 ...

  4. php页面传递参数值几种方法总结

    2013-06-06 18:02 (分类:) 又搞了一个学期的php,就这样吧. php是一种服务器的脚本语言,他也是现在最为流行的WEB开发语言,下面我们来讲述一下几种上在php开发应用中常用的四种 ...

  5. 动态规划------背包问题(c语言)

    /*背包问题: 背包所能容纳重量为10:共五件商品,商品重量用数组m存储m[5]={2,2,6,5,4}, 每件商品的价值用数组n存储,n[5]={6,3,5,4,6};求背包所能装物品的最大价值. ...

  6. Webpack实战(八):教你搞懂webpack如果实现代码分片(code splitting)

    2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...

  7. REDTEAM 指南---第四章 外部侦察

    第四章 外部侦察 贡献者:Haythem Arfaoui 翻译BugMan 主动侦察 介绍 主动足迹涉及使用可以帮助您收集更多信息的工具和技术 有关目标的信息.与被动足迹不同的是,过程永远不会“触及” ...

  8. Cobalt Strike Bypassing Windows Defender 使用混淆处理

    Cobalt Strike – Bypassing Windows Defender 混淆处理 对于所有红色团队成员来说,在交付有效的替代品同时又不拖延延展组织的所有风吹草动始终是一个挑战.就像所有其 ...

  9. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  10. Java 中常见排序算法

    经典的排序算法总结 冒泡排序算法 算法描述: 比较相邻的元素:如果第一个比第二个大,就交换它们两个: 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数: 针 ...