·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. golang搭建一个简单的web服务器

    package main import ( "io/ioutil" "log" "net/http" ) func main() { htt ...

  2. python使用turtle库绘制奥运五环

    效果图: #奥运五环 import turtle turtle.setup(1.0,1.0) #设置窗口大小 turtle.title("奥运五环") #蓝圆 turtle.pen ...

  3. C#的静态工厂方法与构造函数对比

    最近,在与同事进行协同编程时,我们开始讨论在C#中初始化新对象的最佳方法.我一直是使用构造函数实现,尽管他倾向于静态工程方法.这引起了关于每种类型的利弊的大量来来回回的讨论. 为了说明我所说的内容,这 ...

  4. 【转载】wav文件格式分析与详解

    WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows 3.1操作系统上,文件扩展名为WAV,是WaveFom的简写,也称为波形文件,可直接存储声音波形, ...

  5. Windows环境下Nginx配置本地虚拟域名

    进入conf文件夹,新建servers文件夹: 将内部的server配置段提取单独放在一个文件里,存到了conf/servers下,以方便配置多个虚拟主机. 并在nginx.conf里http配置段内 ...

  6. css中伪类和伪元素

    伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...

  7. 前后端API交互如何保证数据安全性?(转)

    前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用 ...

  8. iptables详解(8)iptables自定义链

    自定义链存在的意义:对链进行分类 target可能是一个“动作“也可能是一个”自定义链” 1.新增自定义链. root@ubuntu:~# iptables -t filter -N IN_WEB#结 ...

  9. StarUML之三、StarUML的项目

    1:创建空的项目 创建项目可以按Ctrl+N或选择菜单File| New,StarUML安装打开后默认会有个空项目结构. 2:创建模板项目 可以通过选择模板来启动建模项目(会根据模板创建项目结构). ...

  10. 小白的linux笔记1:CentOS 8 安装与设置

    为了在服务器上跑爬虫,以及学SegNet,研究了一圈看来linux是必学品了.在自己电脑上安装了一个 1.官网下载iso,一个linux dvd是稳定版,选之,另一个stream版是更新更快的测试版, ...