BootStrap（一）

最新推荐文章于 2024-01-18 15:50:03 发布
最新推荐文章于 2024-01-18 15:50:03 发布
阅读量299 收藏
点赞数
分类专栏： BootStrap4 文章标签： bootstrap jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49576031/article/details/120441649
版权

1.Bootstrap简介

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

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

Sass--CSS扩展语言

Mixin--包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

2.引入BootStrap

<!-- 引入bootstrapcss样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- 引入jQuery样式 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<!-- 引入bootstrap.js组件 -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

3.创建第一个 Bootstrap 4 页面

1.代码演示

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <title>引入bootstrap</title>
</head>
<body >
  <div class="container">
  <div class="row">
    <div class="col-sm bg-info">
      One of three columns
    </div>
    <div class="col-sm bg-danger">
      One of three columns
    </div>
    <div class="col-sm bg-success">
      One of three columns
    </div>
  </div>
</div>
</body>
</html>

图例👇

2.移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3.容器类

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

我们可以使用以下两个容器类：

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

 4.Bootstrap4 网格系统

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

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

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

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

1、.col- 针对所有设备

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

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

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

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

网格系统规则

Bootstrap4 网格系统规则:

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

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

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

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

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

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

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

下表总结了 Bootstrap 网格系统如何在不同设备上工作的：

 5.Bootstrap 4 文字排版

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1> - <h6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

5.1 display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式 : 

.display-1, .display-2, .display-3, .display-4。

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <title>标题类</title>
</head>
<body class="container">
  <div class="display-1">标题1</div>
  <div class="display-2">标题2</div>
  <div class="display-3">标题3</div>
  <div class="display-4">标题4</div>
</body>
</html>

图例👇

 5.2<small>元素用于创建字号更小的颜色更浅的文本

 5.3<mark>元素用于黄色背景及有一定的内边距

 5.4Bootstrap4 更多排版类的实例

.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

设定单词首字母大写

.initialism

显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

.list-unstyled

移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

.list-inline

将所有列表项放置同一行

.pre-scrollable

使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

6.Bootstrap4 颜色

文本颜色

.text-muted, .text-primary, 

.text-success, .text-info, 

.text-warning, .text-danger, 

.text-secondary, .text-white, 

.text-dark 和 .text-light

作用任何地方
背景颜色

.bg-primary, .bg-success, 

.bg-info, .bg-warning, 

.bg-danger, .bg-secondary, 

.bg-dark 和 .bg-light。

作用任何地方
表格背景颜色

.table-primary, .table-success, 

.table-info, .table-warning, 

.table-danger, .table-secondary, 

.table-dark 和 .table-light。

作用在表格上

徽章

.badge-primary .badge-secondary 

badge-success, .badge-info, 

.badge-warning, .badge-danger, 

.badge-dark 和 .table-light。

作用在徽章上

7.Bootstrap4 表格

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

代码例👇

<!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">
  <h2>基础表格</h2>
  <p>.table 类来设置基础表格的样式:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

图例👇

7.1条纹.table-striped

在table class="table-striped"

<div class="container">
  <h2>基础表格</h2>
  <p>.table 类来设置基础表格的样式:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

图例👇

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

在table class="table-bordered"  添加边框

 7.3.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

在table class="table-hove"  添加悬浮加深的背景

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

可以通过table-*          设置表格背景

也可以通过bg-*          设置表格背景

8.Bootstrap4 信息提示框

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

代码例👇

        

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="container">
    <h2>提示框</h2>
    <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
    <div class="alert alert-success">
      <strong>成功!</strong> 指定操作成功提示信息。
    </div>
    <div class="alert alert-info">
      <strong>信息!</strong> 请注意这个信息。
    </div>
    <div class="alert alert-warning">
      <strong>警告!</strong> 设置警告信息。
    </div>
    <div class="alert alert-danger">
      <strong>错误!</strong> 失败的操作
    </div>
    <div class="alert alert-primary">
      <strong>首选!</strong> 这是一个重要的操作信息。
    </div>
    <div class="alert alert-secondary">
      <strong>次要的!</strong> 显示一些不重要的信息。
    </div>
    <div class="alert alert-dark">
      <strong>深灰色!</strong> 深灰色提示框。
    </div>
    <div class="alert alert-light">
      <strong>浅灰色!</strong>浅灰色提示框。
    </div>
  </div>
</body>
</html>

图例👇

  • 关闭提示框

代码例👇

<div class="container">
    <div class="alert alert-success alert-dismissible">
      <button class="close" data-dismiss="alert">&times;</button>
      <h2 class="display-3 text-success">成功获取数据</h2>
    </div>
  </div>

图例👇

9.Bootstrap4 按钮

  • 按钮类 .btn

btn-primary          btn-secondary         btn-success         btn-dark   

btn-info                 btn-warning            btn-danger           btn-lightbtn-link  

  • 按钮类可用于 <a>, <button>, 或 <input> 元素上。
  • 按钮设置边框

btn-outline-primary          btn-outline-secondary         btn-outline-success         

btn-outline-dark               btn-outline-info                   btn-outline-warning            

btn-outline-danger           btn-outline-lightbtn-link

  • 不同大小的按钮

 btn-lg  :   大号字

10下拉菜单

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <title>下拉菜单</title>
</head>
<body class="container">
  <div class="input-group">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">选择</button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">GooGle</a>
      <a href="#" class="dropdown-item">HUAWEI</a>
      <a href="#" class="dropdown-item">IOS</a>
    </div>
  </div>
</body>
</html>

图例👇

无奈源于不够强大

HJHO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4常用样式总结
weixin_45753168的博客
04-22 1101
Bootstrap4常用样式总结布局卡片表格 布局 container ： 居中 卡片 <div class="container"style="width: 500px"> <div class="card "> <div class="card-header">头部</div> <div class=...
3 Bootstrap4样式
weixin_45884768的博客
02-29 2534
3 Bootstrap4样式3.1 文本1、标题2、内联文本元素3、文本对齐方式4、英文大小写3.2 列表3.3 表格1、表格样式2、响应式表格3、状态类3.4 图片1、图片的样式2、缩略图处理3、图片对齐处理4、响应式图片3.5 公共样式3.5.1 边框1、基本边框2、清除边框3、边框颜色4、圆角边框3.6 表单3.6.1 表单布局1、基础表单样式2、行内表单3、水平表单3.6.2 复选框样式1...
Bootstrap 全球最受欢迎的前端组件库
09-27 791
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工...
bootstrap4常用样式（仅供参考）
newbiek的博客
04-25 2125
1、容器和网格系统 容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色 字体 text-muted 柔和 text-primary 重要 text-su...
Axure RP8 bootstrap4 样式库，亲测有效！！
01-13
Axure RP8 bootstrap 4 样式库，亲测有效！！使用方法：打开Axure8》元素库》载入元素库》选中本文件，enjoy
Bootstrap一款超好用的前端框架
10-19
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架，感兴趣的朋友一起看看吧
bootstrap一个小案例
08-16
包括导航条，carousel，利用栅栏的三栏布局，导航的标签页以及模态框等
bootstrap一套漂亮的网站后台管理系统模板Flatty ui
05-04
bootstrap一套漂亮的网站后台管理系统模板Flatty ui
Bootstrap 模板一套
06-07
AdminLTE是一款基于bootstrap的后台管理系统的通用模板UI，它的样式美观且较为符合大多数后台管理系统的需求，典型的上|左右|下的布局形式。并且提供了一整套我们开发的时候可能用到的UI样式，比如表格，表单，图表...
bootstrap-4.3.1
06-30
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件： 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条...
ES5基础04. 引入外部CSS样式，以Bootstrap为例
08-31
[JavaScript][JS][前端教學]_ES5基礎#04._引入外部CSS樣式，以Bootstrap為例
Bootstrap组件介绍
anmi3721的博客
06-20 94
一、下拉菜单 　　用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。 1、实例 　　将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。 <div class="dropdown"> <butto...
使用Bootstrap搭首页
m0_68756200的博客
04-01 280
可在Bootstrap挑选自己喜欢的组件 一，实现书籍分类 实现分类代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1:首页书籍分类实现</title> <!-- 一如Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/boo.
01-bootstrap-概述
记录java学习日常~
05-25 285
栅格系统：Bootstrap 提供了一个灵活的网格系统，可以轻松地创建响应式布局。通过将页面分成 12 列网格，开发者可以更加自由、快速地控制页面布局。组件库：Bootstrap 提供了众多的 UI 组件和工具，如导航、下拉菜单、警告框、面板、标签页等，可以大大提高页面开发的效率，减少代码量。此外，Bootstrap 还提供了很多 JavaScript 插件，如模态框、滚动条、分页器等，可以让网站增添更多的交互性和效果。自适应设计：Bootstrap 的优秀之处在于它的响应式设计。
bootstrap
weixin_70902895的博客
08-18 778
需要注意的是，Bootstrap所提供的bootstrap.bundle.js和bootstrap.bundle.min.js文件中包含 了。●栅格系统页面的内容可以放入这些创建好的布局容器中,并且会根据父元素盒子(布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。页面结构使用的基础类名是由bootstrap.min.css文件提供的，引入该文件主要是用来实现页面的样式。页面结构使用的基础类名是由bootstrap.min.css文件提供的，引入该文件主要是用来实现页面的样式。...
Bootstrap前端组件库+构建管理
hhhh
04-18 1295
Bootstrap使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。 Grunt是Node.js中一个JavaScript的任务管理器，也可以使用其他工具与技术来构建Bootstrap Bootstrap的版本 默认版本、支持Flexbox的版本、仅包含网格系统的版本 Bootstrap内置一个移动优先、12栏布局的响应网格系统 Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本
BootstrapBlazor企业级组件库：前端开发的革新之路
成长的足迹
10-07 799
作为一名Web开发人员，开发前端我们一般都是使用JavaScript，而Blazor就是微软推出的基于.Net平台交互式客户Web UI 框架，可以使用C#替代JavaScript，减少我们的技术栈、降低学习前端的成本。而采用Blazor开发，少不了需要封装UI控件，所以今天给大家推荐一套基于Bootstrap风格的Blazor企业级UI组件库。1、开箱即用、丰富的企业级Blazor组件，除了兼容Bootstrap的样式库外，还额外增加了100多个组件；3、支持渐进式Web应用程序；4、支持.Net5+；
Bootstrap 四个 Display 类来控制标题的样式
最新发布
V34dfa的博客
01-18 293
div class="container"> <h1>Display 标题</h1> <p>Display 标题可以输出更大更粗的字体样式。
Bootstrap常用布局样式
热门推荐
橘猫吃不胖的博客
01-16 1万+
Bootstrap常用布局样式1 内容布局1.1 标题类1.2 文本类1.3 列表类2 代码和图文布局2.1 代码样式2.2 图文样式3 表格布局4 辅助样式4.1 添加或移除边框4.2 设置边框颜色 1 内容布局 1.1 标题类 在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。下面对标题类相关样式进行讲解。 在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的H
bootstrap 一行 标题 input 标题下拉框
05-18
可以使用以下代码实现： ```html <div class="row"> <div class="col-md-12"> <h2>标题</h2> <div class="form-group"> <label for="select">下拉框标题</label> <select class="form-control" id="select"> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select> </div> </div> </div> ``` 其中，`row` 和 `col-md-12` 是 Bootstrap 的栅格系统，用于实现响应式布局。`form-group` 和 `form-control` 则是 Bootstrap 的表单样式。你可以根据需要调整样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值