bootstrap

最新推荐文章于 2024-07-15 09:50:34 发布

今天晚上一定要早睡

最新推荐文章于 2024-07-15 09:50:34 发布

阅读量273

点赞数

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

本文链接：https://blog.csdn.net/qq_48192192/article/details/120430031

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap是一个前端框架，用于构建响应式，移动设备优先的网站

bootstrap中文文档

1.引入文件

在head标签中引入Bootstrap CSS文件

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

在body标签中引入jQuery文件和bootstrap js文件（先引入jQuery再引入js文件）

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

2.Container容器

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

3.栅格布局

基础用法（均分）

    <div class="container">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>   //将一行均分为三列
        </div>
    </div>

一列定宽，两边自适应

<div class="container">
  <div class="row">
    <div class="col">1  </div>
    <div class="col-6">2 </div>   12格中占6格，其它6格另外两列平分
    <div class="col"> 3  </div>
  </div>
 </div>

不同尺寸不同宽度（响应式）

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

垂直对齐

规定父盒子和子盒子的高度后，可以设置子盒子在父盒子中的垂直摆放位置（给父元素添加类）

<div class="row align-items-start"><!-- 上 -->
     <div class="col">One of three columns</div>
</div>
<div class="row align-items-center"><!-- 居中 -->
     <div class="col">One of three columns</div>
</div>
<div class="row align-items-end"><!-- 下 -->
     <div class="col">One of three columns</div>
</div>

单独指定某个子盒子的垂直摆列（给子元素添加类）

<div class="row">     
    <div class="col align-self-start">One</div><!-- 上 -->
</div>
<div class="row">     
    <div class="col align-self-start">One</div><!-- 居中 -->
</div>
<div class="row">     
    <div class="col align-self-start">One</div><!-- 下 -->
</div>

水平对齐

<div class="row justify-content-start"><!-- 左 -->
     <div class="col">One of three columns</div>
</div>
<div class="row justify-content-center"><!-- 居中 -->
     <div class="col">One of three columns</div>
</div>
<div class="row justify-content-end"><!-- 右 -->
     <div class="col">One of three columns</div>
</div>
<div class="row justify-content-around"><!-- 间隔对齐 -->
     <div class="col">One of three columns</div>
</div>
<div class="row justify-content-between"><!-- 两边对齐 -->
     <div class="col">One of three columns</div>
</div>

消除row外边距

BootStrap默认的栅格和列间有间隙，一般是左右-15px的marigin，可以在row盒子使用no-gutters类去除。

重排序

在项目中，本身元素出现顺序根据代码循序决定，如果我们希望去影响他，那么可以在col盒子中使用*order-去对它进行排序。如果为order-first那么顺序优先级最高。

列偏移

可以使**用offset-***去对col盒子进行移动。

margin移动

使用ml-auto或者mr-auto,强制盒子的偏移方向

4.排版

标题

设置标题可以使用h1-h6,也可以为文本标签设置**.h1-.h6的类**

<p class="h3">helloworld</p>
<h3>helloworld</h3>

标题备注

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

内联文本

在HTML5中，学习的内联标签，这里同样可以正常使用，并且可以用类的方式设置，如**.small、.mark**等

abbr缩略语

<p>
<abbr title="attribute">attr</abbr></p><p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
</p>

备注与引用

blockquote

<blockquote class="blockquote">   
<p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>   <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

<h3>helloworld
        <small class="text-myted"> helloworld</small>
        <b class="small">helloworld</b>
        <b class="mark">helloworld</b>
    </h3>
    <p class="h3">helloworld</p>
    <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 
    </p>
    <p>
        <abbr title="attribute">attr</abbr>
        <abbr title="HyperText Markup Language" class="initialism">helloworld</abbr>
    </p>

    <blockquote class="blockquote">
        <p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远</p>
        <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
    </blockquote>

在这里插入图片描述

文本对齐

可以为父容器设置对齐方式，让子元素进行对齐，text-left，text-center，text-right

列表

在项目中，Bootsrap为列表设置了一些样式。
我们可以通过list-unstyled去除列表的项目符号及左外边距
可以通过为li设置list-inline-item将它变为水平排列

溢出隐藏

在容器中，我们如果发现内容较多，可能出现放不在的情况，我们可以为容器设置text-truncate对超出的内容进行控制。

图片

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

使用**.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式
使用d-block加float**可以实现图片的浮动

表格

只需要向某个

添加一个基类**.table**，然后通过自定义样式或系统提供的class来起作用。
使用**.table-dark class 选择器来产生颜色反转对比效果，即深色背景和浅色文本
使用.thead-light** 或**.thead-dark** 中的一个样式，就能使区显示出浅黑或深灰。
.table-striped 样式定义，隔行变色。
.table-bordered 类可以产生表格边框
.table-borderless无边界表格
.table-hover 定义到上，可以产生行悬停效果
.table-sm 可以将表格的padding值缩减一半，使表格更加紧凑

图文框

.figure以及.figure-caption类，为HTML5的

以及

元素提供了一个基准样式处理。

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

5.公共样式

边框

我们可以通过.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-

<div class="w-50" style="background-color: salmon; height: 30px;"></div>

间隔

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

6.组件

导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>
      <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 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 class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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">
      <img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/img/2016instbg_03.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>

今天晚上一定要早睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap

bootstrap1.引入文件2.Container容器3.栅格布局基础用法（均分）一列定宽，两边自适应不同尺寸不同宽度（响应式）定义row空间可放的列数垂直对齐水平对齐消除row外边距重排序列偏移margin移动4.排版标题标题备注重要内容内联文本abbr缩略语备注与引用文本对齐列表溢出隐藏图片表格图文框5.公共样式边框浮动清除浮动display定位规格间隔6.组件导航栏模态框轮播图Bootstrap是一个前端框架，用于构建响应式，移动设备优先的网站bootstrap中文文档1.引入文件在head
复制链接

扫一扫