bootstrap4学习记录1——初始化、按钮与文字

最新推荐文章于 2023-07-06 21:36:11 发布

我要当极客

最新推荐文章于 2023-07-06 21:36:11 发布

阅读量816

点赞数 1

分类专栏：学习小记录

本文链接：https://blog.csdn.net/weixin_44089544/article/details/87645547

版权

学习小记录专栏收录该内容

21 篇文章 0 订阅

订阅专栏

boostrap小弟也是久仰大名了，今天正式进入学习，记录一下学习的内容。
完整练习代码在最下方，有兴趣的同学可以一起尝试！

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。boostrap提供了一整套完善的、响应式的UI组件, 从PC端到移动端可以一站式开发，比较适合后台管理系统、门户

官网：https://v4.bootcss.com/

bootsrap是由4类文件分别组成：

Bootstrap4 核心 CSS 文件
jQuery文件
popper.min.js 用于弹窗、提示、下拉菜单
Bootstrap4 核心 JavaScript 文件

bootstrap4的CSS文件和JS文件在官网上即可下载，JQ和popper分别去相应的官网下载即可。（相信大家也都用过这两个插件库）当然也可以进入官网点击快速入门，复制初学者文档直接使用。（复制就可以用bootstrap，地址都是在线地址），代码如下：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!--移动端初始化-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 相关的JS插件库  -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

然后我们一步一步的来尝试一下功能。

1.按钮
首先是基本功能，先上代码

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

效果如下
在这里插入图片描述
真的是好简单呢哈！只需要修改class属性即可，btn为必填。然后这个btn的属性只能作用在 a、input、button标签上。

然后是边框版：

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

哈又是超级简单，边框就是加上outline…难道未来的框架都是这么好学吗 - .-

效果如图,警告为hover效果~

当然我们还可以修改按钮的大小,不过系统只分为大号,正常和小号,如果需要自己定制就需要动手了

<button type="button" class="btn btn-success btn-lg">大号按钮</button>
<button type="button" class="btn btn-danger">默认按钮</button>
<button type="button" class="btn btn-warning btn-sm">小号按钮</button>

效果图:
在这里插入图片描述
还有块级组:

<button type="button" class="btn btn-success btn-block">撩课一下</button>

块级组顾名思义就是沾满一行没代码更是好些只需要加入btn-block即可

效果图:

最后是我们的按钮组:

<div class="btn-group">
    <button class="btn btn-success">锅包肉</button>
    <button class="btn btn-warning">鱼香肉丝</button>
    <button class="btn btn-danger">地三鲜</button>
</div>

效果:
在这里插入图片描述
又是非常简单呢哼! 只需要一个父级加入bnt-group,然后添加按钮即可,当然我们也可以为父级添加btn-group-lg/sm来直接设置子集按钮大小，也可以让标签垂直显示，只需要修改父级为btn-group-vertical：

<div class="btn-group-vertical">
    <button class="btn btn-success">锅包肉</button>
    <button class="btn btn-warning">鱼香肉丝</button>
    <button class="btn btn-danger">地三鲜</button>
</div>

效果如图：
在这入图片描述
文字:

代码：

<div class="container">
    <h1>东北菜</h1>
    <!--可以将一些代码元素放到 code 元素里面-->
    <p>东北菜代表: <code>锅包肉</code>, <code>鱼香肉丝</code>, 和 <code>地三鲜</code> </p>
</div>

效果：
在这里插入图片描述

文字颜色：

<div class="container">
    <h3>文本颜色:</h3>
    <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>

颜色也是和按钮一样简单的不得了~去掉了btn，然后将btn-…换成了text-…颜色都是一样的
效果图：
在这里插入图片描述
最后是文字的背景，其实大家应该已经猜到了！没错上代码

<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的</p>
    <p class="bg-success text-white">执行成功</p>
    <p class="bg-info text-white">信息提示</p>
    <p class="bg-warning text-white">警告</p>
    <p class="bg-danger text-white">危险</p>
    <p class="bg-secondary text-white">副标题</p>
    <p class="bg-dark text-white">深灰</p>
    <p class="bg-light text-dark">浅灰</p>
</div>

效果图：
在这里插入图片描述
没啥说的，大家也能猜到背景颜色就是加bg呗。

最后就是所有的代码：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>


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

<br>
<br>
<br>
<br>

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

<br>
<br>
<br>
<br>
<br>

<button type="button" class="btn btn-success btn-lg">大号按钮</button>
<button type="button" class="btn btn-danger">默认按钮</button>
<button type="button" class="btn btn-warning btn-sm">小号按钮</button>

<br>
<br>
<br>
<br>

<button type="button" class="btn btn-success btn-block">块级标签</button>

<br>
<br>
<br>
<br>

<div class="btn-group">
    <button class="btn btn-success">锅包肉</button>
    <button class="btn btn-warning">鱼香肉丝</button>
    <button class="btn btn-danger">地三鲜</button>
</div>

<br>
<br>
<br>
<br>

<div class="btn-group-vertical">
    <button class="btn btn-success">锅包肉</button>
    <button class="btn btn-warning">鱼香肉丝</button>
    <button class="btn btn-danger">地三鲜</button>
</div>

<br>
<br>
<br>
<br>

<div class="container">
    <h1>东北菜</h1>
    <!--可以将一些代码元素放到 code 元素里面-->
    <p>东北菜代表: <code>锅包肉</code>, <code>鱼香肉丝</code>, 和 <code>地三鲜</code> </p>
</div>

<br>
<br>
<br>
<br>

<div class="container">
    <h3>文本颜色:</h3>
    <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>

<br>
<br>
<br>
<br>

<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的</p>
    <p class="bg-success text-white">执行成功</p>
    <p class="bg-info text-white">信息提示</p>
    <p class="bg-warning text-white">警告</p>
    <p class="bg-danger text-white">危险</p>
    <p class="bg-secondary text-white">副标题</p>
    <p class="bg-dark text-white">深灰</p>
    <p class="bg-light text-dark">浅灰</p>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

快复制一下试试吧！