bootstrap工具包的使用

最新推荐文章于 2024-07-25 11:52:08 发布

夏天的雨and冰淇淋

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量360

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/weixin_43605386/article/details/114610167

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在boot中，大量使用元素的自定义属性来调用方法，有多样样式可调用，如果需要更为复杂更
为个性的效果处理，需要重写样式。以下记录bootstrap工具包的用过的部分样式。

导入

把bootstrap工具包复制到webstorm新建项目中，在html中顺序导入boot四个文件

    <!-- 导入boot四个文件，顺序固定-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

常用样式

1.导航栏

常用导航栏

外层div调用内部样式navbar
内层ul调用navbar-nav，这里运用的是弹性布局，默认是column(列)，换成navbar-nav-row后li会按行显示
nav-expand-md/ls/xl/lg 指的是响应式导航栏布局，配合ul调用navbar-nav在不同大小的屏幕下横向或纵向显示
<h1>导航栏</h1>
<div class="navbar navbar-expand-md">
   <ul class="navbar-nav">
       <li class="nav-item"><a href="" class="nav-link">导航栏</a></li>
       <li class="nav-item"><a href="" class="nav-link">导航栏</a></li>
       <li class="nav-item"><a href="" class="nav-link">导航栏</a></li>
   </ul>
</div>
显示截图

胶囊导航栏

添加active表示默认显示

<h1>胶囊导航</h1>
<ul class="nav nav-pills">
   <li class="nav-item"><a href="#tab5" data-toggle="pill" class="nav-link active">java</a></li>
   <li class="nav-item"><a href="#tab6" data-toggle="pill" class="nav-link">web</a></li>
   <li class="nav-item"><a href="#tab7" data-toggle="pill" class="nav-link">python</a></li>
</ul>
<div class="tab-content">
   <div id="tab5" class="tab-pane active">java基础</div>
   <div id="tab6" class="tab-pane">webstorm基础</div>
   <div id="tab7" class="tab-pane">python导航基础</div>
</div>

显示截图
胶囊导航栏

选项卡导航栏

a使用nav-link样式、自定义属性data-toggle=“tab”，使用href属性指向下面内容的id
默认显示：在默认的a和下面的div中的class中添加active
div.tab-pane 配合父元素的tab-content使用，让子元素display:none
子元素div要添加id，被上面的href使用，要与每一个a标签对应

<h1>选项卡导航</h1>
<!--选项卡-->
<ul class="nav nav-tabs">
   <li><a href="#tab1" class="nav-link" data-toggle="tab">选项卡一</a></li>
   <li><a href="#tab2" class="nav-link active" data-toggle="tab">选项卡二</a></li>
   <li><a href="#tab3" class="nav-link" data-toggle="tab">选项卡三</a></li>
   <li><a href="#tab4" class="nav-link" data-toggle="tab">选项卡四</a></li>
</ul>
<!--内容显示区-->
<div class="tab-content">
   <div id="tab1" class="tab-pane">1内容.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div id="tab2" class="tab-pane active">2内容.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div id="tab3" class="tab-pane">3内容.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div id="tab4" class="tab-pane">4内容.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

显示截图
选项卡导航栏

水平导航栏

ul使用nav 定义弹性布局，对于所有弹性设置都是生效的
li使用nav-item 与父级的nav-justified配合，让元素等宽显示
a使用nav-link 设置了hover等样式
<h1>水平导航</h1>
<ul class="nav justify-content-around nav-justified">
   <li class="nav-item"><a href="#" class="nav-link">猫砂</a></li>
   <li class="nav-item"><a href="#" class="nav-link">优惠券</a></li>
   <li class="nav-item"><a href="#" class="nav-link">PLUS会员</a></li>
   <li class="nav-item"><a href="#" class="nav-link">拍马</a></li>
</ul>
显示截图

2.信息提示框

外层div的class
alert是基本类
alert-danger/success 提示框颜色样式
内层span加上取消信息框的x
使用自定义属性： data-dismiss=“alert”，可以通过点击该元素达到让目标消失的效果
<h1>信息提示框</h1>
<div class="alert alert-danger">
   <span class="close" data-dismiss="alert">&times;</span>
   去吧！皮卡丘
</div>
显示截图

3.按钮组

默认按钮组

btn-danger/success/primary/warning 按钮颜色样式

<h1>默认按钮组</h1>
<div class="btn-group">
   <button class="btn btn-danger">小鸡炖蘑菇</button>
   <button class="btn btn-success">猪肉炖粉条</button>
   <button class="btn btn-primary">史莱姆糖浆</button>
   <button class="btn btn-warning">派蒙大披萨</button>
</div>

显示截图
默认按钮组

垂直按钮组

把默认按钮组的div的class中的btn-group替换成btn-group-vertical
显示截图

4.下拉菜单

dropdown-toggle：添加一个倒三角
dropdown-menu配合父级的dropdown使用，作为下拉的内容，隐藏

<h1>下拉菜单</h1>
<div class="dropdown">
   <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">菜单</button>
   <ul class="dropdown-menu">
		<li><a href="#">小鸡炖蘑菇</a></li>
		<li><a href="#">猪肉炖粉条</a></li>
		<li><a href="#">史莱姆糖浆</a></li>
		<li><a href="#">派蒙大披萨</a></li>
		<li><a href="#">丘丘人蛋糕</a></li>
   </ul>
</div>

显示截图
下拉菜单

5.表单

form-inline 内联表单水平方向（弹性布局）
form-group 堆叠表单垂直方向
class=“form-control” input 元素的基本类（块级. w100,圆角，过渡）
父元素：form-check 相对定位，让子元素以父元素进行偏移定位
子元素：form-check-input 绝对定位，和form-check配合使用
<h1>表单</h1>
<form action="" class="form-group">
   <div>
		用户名：
		<input type="text" class="form-control"/>
   </div>
   <div>
		用户密码：
		<input type="password" class="form-control"/>
   </div>
   <div class="form-check">
		<input type="checkbox" class="form-check-input"/>
		自动登录
   </div>
   <button class="btn btn-primary">登录</button>
</form>
显示截图

6.媒体

左边放置图片，右边放置媒体介绍：h4小标题，p介绍内容
p-3 等价于内边距padding:1rem
ml-3 等价于margin:1rem
<h1>媒体</h1>
<div class="media p-3">
   <img src="img/test.jpg" alt="">
   <div class="media-body ml-3">
		<h4>弥豆子</h4>
		<p>冲冲冲！</p>
   </div>
</div>
显示截图

7.卡片

<h1>卡片</h1>
<div class="card">
   <div class="card-header">
		<h2>卡片标题</h2>
   </div>
   <div class="card-body">
		<p>
       	卡片内容         
		</p>
   </div>
   <div class="card-footer">
		<p>版权所有</p>
   </div>
</div>

显示截图

8.折叠

a标签和button标签都可以绑定，只想元素
a使用href属性指定折叠内容，示例：
<a class="btn btn-danger" data-toggle="collapse" href="#demo">折叠</a>
button使用data-target="#id"指定折叠内容
data-toggle使用自定义属性出现折叠/收起效果
<h1>折叠</h1>
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
   折叠内容            
</div>
显示截图

9.轮播图

carousel-item display:none
给最外层div的carousel添加自定义的属性data-ride=“carousel”
给某一个div的carousel-item添加类active,图片开始轮播时默认初始图
同时轮播指示符也许定义对应的active

<h1>轮播图</h1>
<div class="carousel" data-ride="carousel" id="demo">
<!-- 1.轮播图片-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/lunbo1.jpg" class="w-100" alt=""/>
</div>
<div class="carousel-item">
<img src="img/lunbo2.jpg" class="w-100" alt=""/>
</div>
<div class="carousel-item">
<img src="img/lunbo3.jpg"  class="w-100" alt=""/>
</div>
</div>
<!-- 2.左右箭头-->
<a href="#demo" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
<a href="#demo" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<!-- 3.轮播指示符-->
<ul class="carousel-indicators">
<li class="active"  data-slide-to="0" data-target="#demo"></li>
<li data-slide-to="1" data-target="#demo"></li>
<li data-slide-to="2" data-target="#demo"></li>
</ul>
</div>

显示截图
轮播图

10.属性

尺寸

w 设置宽度 h 设置高度
w-25 25% h-25 25%
w-50 50% h-50 50%
w-75 75% h-75 75%
w-100 100% h-100 100%

内外边距效果等价于
m-auto 水平居中 margin:auto !important
mt-n 上外边距 margin-top: N !important
mb-n 下外边距 margin-bottom: N !important
ml-n 左外边距 margin-left: N !important
mr-n 右外边距 margin-right: N !important
mx-n 左右外边距 margin-right: N !important;
margin-left: N !important
my-n 上下外边距 margin-top: N !important;
margin-bottom: N !important
p-n 内边距 padding:N !important
pt-n 上内边距 padding-top: N !important
pb-n 下内边距 padding-bottom: N !important
pl-n 左内边距 padding-left: N !important
pr-n 右内边距 padding-right: N !important
px-n 左右内边距 padding-right: N !important;
margin-left: 0.5rem !important
py-n 上下内边距 padding-top: N !important;
margin-bottom: 0.5rem !important
pr-n 右内边距 padding-right: N !important
px-n 左右内边距 padding-right: N !important;
margin-left: 0.5rem !important
py-n 上下内边距 padding-top: N !important;
margin-bottom: 0.5rem !important

w	设置宽度	h	设置高度
w-25	25%	h-25	25%
w-50	50%	h-50	50%
w-75	75%	h-75	75%
w-100	100%	h-100	100%

内外边距	效果	等价于
m-auto	水平居中	margin:auto !important
mt-n	上外边距	margin-top: N !important
mb-n	下外边距	margin-bottom: N !important
ml-n	左外边距	margin-left: N !important
mr-n	右外边距	margin-right: N !important
mx-n	左右外边距	margin-right: N !important; margin-left: N !important
my-n	上下外边距	margin-top: N !important; margin-bottom: N !important
p-n	内边距	padding:N !important
pt-n	上内边距	padding-top: N !important
pb-n	下内边距	padding-bottom: N !important
pl-n	左内边距	padding-left: N !important
pr-n	右内边距	padding-right: N !important
px-n	左右内边距	padding-right: N !important; margin-left: 0.5rem !important
py-n	上下内边距	padding-top: N !important; margin-bottom: 0.5rem !important
pr-n	右内边距	padding-right: N !important
px-n	左右内边距	padding-right: N !important; margin-left: 0.5rem !important
py-n	上下内边距	padding-top: N !important; margin-bottom: 0.5rem !important