Bootstrap4 入门学习

最新推荐文章于 2023-07-10 17:18:02 发布

xiabe

最新推荐文章于 2023-07-10 17:18:02 发布

阅读量467

点赞数

分类专栏： Bootstrap 文章标签：前端 Bootstrap

本文链接：https://blog.csdn.net/xiabenshu/article/details/89091384

版权

Bootstrap 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

快速开始

配置环境

在这里插入图片描述

一个简单的hello world例子

<!doctype html> <!-- h5声明 -->
<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="bootstrap-4.3.1-dist/css/bootstrap.min.css">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.4.1.min.js" ></script>
    <script src="js/popper.min.js" ></script>
    <script src="bootstrap-4.3.1-dist/css/js/bootstrap.min.js" ></script>
  </body>
</html>

对于box-sizing的改动

为了在CSS中更直观地调整大小，我们将全局box-sizing值从content-box切换到border-box。这确保 padding 不会影响元素的最终计算宽度，但它会导致一些第三方软件出现问题，比如谷歌Maps和谷歌定制搜索引擎。
在极少数情况下，您需要覆盖它，请使用以下内容:

.selector-for-some-widget {
  box-sizing: content-box;
}

通过上面的代码片段，嵌套的元素(包括通过::before和::after生成的内容)都将继承.selector-for-some-widget的指定box- size。

Reboot

用于跨浏览器显示效果的统一，重置。

Bootstrap 中的内容

在这里插入图片描述
对于bootstrap中的bundle 包含了proper.js

css 文件选择

在这里插入图片描述

js文件选择

在这里插入图片描述

xiabe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap4 入门学习

快速开始配置环境一个简单的hello world例子<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <!-- 响应式标签 -...
复制链接

扫一扫