Bootstrap4入门

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

不胜舟-

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

阅读量5.9k

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45722313/article/details/105270868

版权

Bootstrap4

开始

几乎支持当今所有主流操作系统的主流浏览器

<!doctype html>
<html lang="zh-cn">
  <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.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

注意

头部规范

<!doctype html>
<html lang="zh-cn">
...
</html>

为了确保所有的设备的渲染和触摸效果，必须在网页的khead>区添加响应式的视图标签

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

容器

Container容器是窗口布局的最基本元素，BootStrap推荐所有样式都定义在container或.container-fluid容器之中

这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度

图片.png

<div class="container">
  <!-- Content here -->
</div>

<div class="container-fluid">
  ...
</div>

图片.png

不胜舟-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4入门

Bootstrap4开始几乎支持当今所有主流操作系统的主流浏览器<!doctype html><html lang="zh-cn"> <head>  <meta charset="utf-8"> <meta name="viewport" c...
复制链接

扫一扫