bootstrap框架教程

最新推荐文章于 2024-09-25 10:17:48 发布

金超斌

最新推荐文章于 2024-09-25 10:17:48 发布

阅读量206

点赞数

分类专栏： bootstrap 文章标签： css

本文链接：https://blog.csdn.net/jojodeblog/article/details/107530932

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

头部样式

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=dege">
  <!-- IE9以下时使用 -->
  <!-- [if lt IE 9]
    <script src="https://oss.maxcdh.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  [endif] -->
 <!-- 引入css的bootstrap样式网址 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>

col

一行里面的列所占宽度

  <!-- 父盒子必须类名为container -->
  <div class="container">
    <div class="row">
      <!-- col-lg 大于1200(大桌面);col-md大于992(桌面);col-sm大于768(平板);col-xs小于768(手机) -->
      <!-- 和大于12会另起一行 -->
      <div class="col-lg-3 col-md-7 col-sm-4 col-xs-10 nav1">5123123123</div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 nav2" >5</div>
      <div class="col-lg-6 col-md-2 col-sm-4 col-xs-5 nav3">1</div>
    </div>
  </div>

offset 偏移:相当于给col添加margin-left

<div class="container">
    <div class="row">
      <div class="col-lg-4" style="background-color: chartreuse;">10</div>
      <!-- 向右偏移了4格 -->
      <div class="col-lg-4 col-lg-offset-4">20</div>
    </div>
  </div>

push:向右偏移 pull:向左偏移

<!-- 父盒子必须类名为container -->
  <div class="container">
    <div class="row">
      <!-- 向右偏移了8格 -->
      <div class="col-lg-4 col-lg-push-8" style="background-color: chocolate;">左边</div>
      <!-- 向左偏移了4格 -->
      <div class="col-lg-8 col-lg-pull-4" style="background-color:cornflowerblue;">右边</div>
    </div>
  </div>

hidden

  <div class="container">
    <div class="row">
      <!-- col-lg 大于1200(大桌面);col-md大于992(桌面);col-sm大于768(平板);col-xs小于768(手机) -->
      <!-- 和大于12会另起一行 -->
      <!-- 在超小屏和小屏下,1会隐藏 -->
      <div class="col-lg-6 hidden-xs hidden-sm" style="background-color: cornflowerblue;">1</div>
      <div class="col-lg-6" style="background-color: #ccc;">3</div>
    </div>
  </div>

在这里插入图片描述