bootstrap4简单笔记

bootstrap4简单笔记

1.网格系统

.col- 针对所有设备

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

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

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

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

col-*-* 第一个星号表示相应的设备，sm，md，lg或者xl，第二个星号表示数字，同一行的数字相加为12.

2.文字排版

h1-h6 //标题样式

display-4 //控制标题的样式

<small>元素用于创建字号更小的颜色更浅的文本(可放在标题样式h1-6中)

<mark>为黄色背景及有一定的内边距

<abbr>元素的样式为显示在文本底部的一条虚线边框

<code>元素一般都是将一些代码块放在code里面

<kbd>一般会将字体变为白色，将背景变为黑色

3.jumbotron

jumbotron会创建一个大的灰色的背景框，里面可以设置一些特殊的内容和信息。 class = “jumbotron”

4.分页

要创建一个基本分页可以再<ul>元素上添加.pagination类，然后再<li>元素上添加.page-item类。

.disabled类可以设置分页连接不可点击。

.pagination-lg类设置大字体的分页项目，.pagination-sm类设置小字体的分页项目

.breadcrumb和.breadcrumb-item类用于设置面包屑导航

5.折叠

.collapse类用于指定一个折叠元素；点击按钮会在隐藏与显示之前切换

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容

6.导航

创建一个简单的水平导航栏，可以在 **<ul>** 元素上添加 .nav类，在每个 **<li>** 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

.flex-column 类用于创建垂直导航

.nav-justified 类可以设置导航项齐行等宽显示

7.导航栏

导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 **<ul>** 元素并添加 class="navbar-nav" 类。 然后在 **<li>** 元素上添加 .nav-item 类， **<a>** 元素上使用 .nav-link 类:

8.表单

表单元素 **<input>**, **<textarea>**, 和 **<select>** elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

9.轮播

在每个 **<div class="carousel-item">** 内添加 **<div class="carousel-caption">** 来设置轮播图片的描述文本

10.模态框

我们可以通过添加 **.modal-sm** 类来创建一个小模态框，**.modal-lg** 类可以创建一个大模态框。

尺寸类放在 **<div>**元素的 **.modal-dialog** 类后