在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">×</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 !importantmy-n 上下外边距 margin-top: N !important;
margin-bottom: N !importantp-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 !importantpy-n 上下内边距 padding-top: N !important;
margin-bottom: 0.5rem !importantpr-n 右内边距 padding-right: N !important px-n 左右内边距 padding-right: N !important;
margin-left: 0.5rem !importantpy-n 上下内边距 padding-top: N !important;
margin-bottom: 0.5rem !important
9392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
