云社区 博客 博客详情

前端开发核心篇——Bootstrap

小团子999 发表于 2020-07-04 16:17:49 2020-07-04
1
0

【摘要】 1. Bootstrap简介 Bootstrap 是全球最受欢迎的响应式、移动设备优先的门户和应用前端框架。2. Bootstrap4网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。我们也可以根据自己的需要,子定义列数。 Bootstrap 4 网...

1. Bootstrap简介

        Bootstrap 是全球最受欢迎的响应式、移动设备优先的门户和应用前端框架。

2. Bootstrap4网格系统

        Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。我们也可以根据自己的需要,子定义列数。

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

    • .col- 针对所有设备。

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

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

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

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

        网格系统规则:

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

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

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

    • 网格列是通过跨越指定的 12 个列来创建。

3. 常用组件

    1)Bootstrap4文字排版

        Bootstrap 4 默认的font-size 为 16px, line-height 为 1.5。默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。<small> 元素用于创建字号更小的颜色更浅的文本。更多文字排版类如下:

类名 描述
.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写

    2)Bootstrap4 颜色

        Bootstrap 4 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info,.text-warning, .text-danger, .text-secondary, .text-white,.text-dark and .text-light。

背景颜色

        背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。注意背景颜色不会设置文本的颜色,在一些实例中你需要与 .text-* 类一起使用。

    3)Bootstrap4 表格

        Bootstrap4 通过 .table 类来设置基础表格的样式。

    • .table-striped 类,在 <tbody> 内的行上添加条纹

    • .table-bordered 类可以为表格添加边框。

    • .table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)。

    • .table-dark 类可以为表格添加黑色背景:

    • 通过指定意义的颜色类可以为表格的行或者单元格设置颜色:


    类名 描述
    .table-primary 蓝色: 指定这是一个重要的操作
    .table-success 绿色: 指定这是一个允许执行的操作
    .table-danger 红色: 指定这是可以危险的操作
    .table-info 浅蓝色: 表示内容已变更
    .table-warning 橘色: 表示需要注意的操作
    .table-active 灰色: 用于鼠标悬停效果
    .table-secondary 灰色: 表示内容不怎么重要
    .table-light 浅灰色,可以是表格行的背景
    .table-dark 深灰色,可以是表格行的背景
    • .table-responsive 类用于创建响应式表格:在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条):

    类名 屏幕宽度
    .table-responsive-sm < 576px
    .table-responsive-md < 768px
    .table-responsive-lg < 992px
    .table-responsive-xl < 1200px

    4)Bootstrap4 图像形状

    • .rounded 类可以让图片显示圆角效果。

    • .rounded-circle 类可以设置椭圆形图片。

    • .img-thumbnail 类用于设置图片缩略图(图片有边框)。

    • .float-right 类来设置图片右对齐;.float-left 类设置图片左对齐。

    • 图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。我们可以通过在 <img>  标签中添加 .img-fluid 类来设置响应式图片。

    5)Bootstrap4 信息提示框

        提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。

    • 提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。

    • 提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close"data-dismiss="alert" 类来设置提示框的关闭操作。

    6)Bootstrap4 按钮

    • 设置按钮的基本样式:

class(类名) 样式
btn 基本按钮
btn btn-primary 主要按钮
btn btn-secondary 次要按钮
btn btn-success 成功
btn btn-info 信息
btn btn-warning 警告
btn btn-danger 危险
btn btn-dark 黑色
btn btn-light 浅色
btn btn-link 链接
    • 钮类可用于 <a>, <button>, 或 <input> 元素上。

    • 可以设置按钮的大小。

class(类名)
样式
btn btn-primary btn-lg 大号按钮
btn btn-primary 默认按钮
btn btn-primary btn-sm 小号按钮
    • 按钮可设置为激活或者禁止点击的状态。.active 类可以设置按钮是可用的, disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击。

    • 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。.btn-group-vertical 类来创建垂直的按钮组

    7)Bootstrap4 徽章(Badges)

        徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化。.badge-pill 类来设置药丸形状徽章。

    8)Bootstrap4 进度条

        进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下:

    • 添加一个带有 .progress 类的 <div>。

    • 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。

    • 添加一个带有百分比表示的宽度的 style 属性,例如 style="width:70%" 表示进度条在 70% 的位置。

    • 进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改高度。

    • 可以在进度条内添加文本,如进度的百分比。

    • .progress-bar-striped 类来设置条纹进度条。

    • .progress-bar-animated 类可以为进度条添加动画。

    9)Bootstrap4 分页

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

    • 当前页可以使用 .active 类来高亮显示。

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

    • 可以将分页条目设置为不同的大小。.pagination-lg 类设置大字体的分页条目;.pagination-sm 类设置小字体的分页条目。

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

    10)Bootstrap4 卡片

        通过.card.card-body 类来创建一个简单的卡片。

    • .card-header类用于创建卡片的头部样式, .card-footer 类用于创建卡片的底部样式。

    • 设置卡片的背景颜色类: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark.bg-light

    • 头部元素上使用 .card-title 类来设置卡片的标题 。.card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

    • <img> 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom(图片在文字下方 来设置图片卡片。

    • 如果图片要设置为背景,可以使用 .card-img-overlay 类。

    11) Bootstrap4 下拉菜单

        .dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggledata-toggle=" dropdown"  属性。<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加.dropdown-item 类。

    • .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线。

    • .dropdown-header 类用于在下拉菜单中添加标题。

    • .active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

    • 如果要禁用下拉菜单的选项,可以使用.disabled 类。

    • 如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。

    • 下拉菜单向右弹出,可以在 div 元素上添加  "dropright" 类;上拉菜单向上弹出,可以在 div 元素上添加  "dropup" 类;下拉菜单向上弹出,可以在 div 元素上添加  "dropleft" 类。

    12)Bootstrap4 导航

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

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

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

    • 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

    • .nav-pills 类可以将导航项设置成胶囊形状。

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

    13)Bootstrap4 表单

        Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。

    • 表单布局:堆叠表单 (全屏宽度):垂直方向。内联表单:水平方向。所有内联表单中的元素都是左对齐的。内联表单需要在 <form> 元素上添加  .form-inline类。

    • 表单控件:input、textarea、checkbox、radio、select。

    Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

    • 输入框

            使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。最后,我们还需要使用 .input-group-text 类来设置文本的样式。使用 .input-group-sm 类来设置小的输入框, .input-group-lg 类设置大的输入框。

    14)Bootstrap4 轮播

轮播中使用的类说明:

描述
.carousel 创建一个轮播
.carousel-indicators 为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。
.carousel-inner 添加要切换的图片
.carousel-item 指定每个图片的内容
.carousel-control-prev 添加左侧的按钮,点击会返回上一张。
.carousel-control-next 添加右侧按钮,点击会切换到下一张。
.carousel-control-prev-icon 与 .carousel-control-prev 一起使用,设置左侧的按钮
.carousel-control-next-icon 与 .carousel-control-next 一起使用,设置右侧的按钮
.slide 切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。

    15)Bootstrap4 模态框

        模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。通过添加 .modal-sm 类来创建一个小模态框,.modal-lg 类可以创建一个大模态框。 尺寸类放在 <div>元素的 .modal-dialog 类后。

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:前端开发进阶篇——Flutter滚动组件

下一篇: 前端开发核心篇——Vue

评论 (1)


张辉

1楼2020-07-05 16:55:48
能不能带点例子?没有例子搞不清是什么效果。。

登录后可评论,请 登录注册

评论