BS的用法

最新推荐文章于 2022-06-08 20:00:46 发布

颖颖丫

最新推荐文章于 2022-06-08 20:00:46 发布

阅读量423

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/l_y_h___/article/details/120433661

版权

引入BS

<link   href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"   rel="stylesheet">


<script   src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script   src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

Container容器

<!-- 居中，适配不同的断的 max-width 尺寸 -->
<div class="container"></div>
<!-- 全屏，适配屏幕的 width: 100% 尺寸 -->
<div class="container-fluid"></div>
<!-- 在指定规格隔断上width: 100% 尺寸 -->
<div class="container-lg"></div>

栅格（12列）

基础用法均分

<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">1</div>
        <div class="col">1</div>
     </div>
</div>

<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col-6">1</div>
        <div class="col">1</div>
     </div>
</div>
<!--一共12格-->

不同尺寸不同宽度

<div class="row">
    <div class="col-12 col-lg-6 col-xl-3">1</div>
    <div class="col-12 col-lg-6 col-xl-3">2</div>
    <div class="col-12 col-lg-6 col-xl-3">3</div>
    <div class="col-12 col-lg-6 col-xl-3">4</div>
 </div>

定义row空间可放的列数

<div class="container">
   <div class="row row-cols-2"> 
       <div class="col">Column</div>     
       <div class="col">Column</div>     
       <div class="col">Column</div>     
       <div class="col">Column</div>   
    </div>
</div>

消除row外边距:使用no-gutters类去除

标题

在项目中，标题元素仍可以使用h1-h6,也可以为文本标签设置.h1-.h6的类

标题备注(.text-muted):小标题

<h3>   Fancy display heading   
<small class="text-muted">With faded secondary text</small>
</h3>

重要内容(.lead)

<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 
</p>

图片

给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式

使用d-block加float可以实现图片的浮动

表格

只需要向某个<table>添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。

使用.table-dark class选择器来产生颜色反转对比效果，即深色背景和浅色文本

使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

.table-striped 样式定义 <tbody>，隔行变色。

.table-bordered 类可以产生表格边框

.table-borderless无边界表格

.table-hover 定义到 <tbody>上，可以产生行悬停效果

.table-sm 可以将表格的padding值缩减一半，使表格更加紧凑

公共样式

边框

我们可以通过.border为元素添加边框效果，.border-top为设置某一边的边框；可以用消减的方式进行设置，如：.border-top-0则为去除顶部的边框，使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。

浮动

我们可以设置元素float-left或者float-right实现左右浮动

清除浮动

通过给父元素添加.clearfix，快速轻松地清除容器内浮动的内容。

display

我们可以通过.d-*为元素设置display的值：

none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex

定位

我们可以通过position-*为元素设置定位的效果：

static、relative、absolute、fixed、sticky

fixed-top 固定头部

规格

我们可以通过w-*或者h-*设置元素的宽度和高度:

25、50、75、100、auto

最大宽度或高度 mw-*/mh-*

间隔

我们可以通过m-*或者p-*设置元素的外边距和内边距：

0、1、2、3、4、5 ——》0/0.25/0.5/1/1.5/3

其中可以分别为某个边进行设置t/b/l/r,左右为x，上下为y

导航栏

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
      <!-- 这里可以为标题放置图标或者图标 -->
        <img src="https://getbootstrap.net/assets/brand/bootstrap-solid.svg"  width="30"  height="30"  class="d-inline-block  align-top"  alt="">
        Navbar</a>
      <!-- navbar-toggler  为导航设置切换按钮,实现折叠效果-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <!--collapse navbar-collapse用于通过父断点进行分组和隐藏导航列内容-->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- navbar-nav  提供完整的高和轻便的导航（包括对下拉菜单的支持)-->
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
      <!-- dropdown  提供下拉菜单效果-->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
      <!--form-inline  提供表单控件放置 -->
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </div>
    <!-- Button trigger modal -->
<a type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
    Launch static backdrop modal
</a>
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">新增员工</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
              </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>

轮播图

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <!--姿态指示器-->
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <!-- 主体内容 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
            <!-- 块化图片 100%宽度-->
              <img src="./uv.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="./uv.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="./uv.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <!-- 带控制器的效果-->
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

模态框

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>