看程序学bootstrap8-基本样式之其他

最新推荐文章于 2024-01-16 23:20:50 发布

涂家豪

最新推荐文章于 2024-01-16 23:20:50 发布

阅读量170

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/tujiahao1/article/details/93508720

版权

bootstrap 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

示例 1 : 关闭按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
   <button type="button" class="close" aria-hidden="true">
      &times;
   </button>

示例 2 : 下拉菜单的按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<span class="caret"></span>

示例 3 : 左浮动

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="pull-left">文字浮动到左边</div>

示例 4 : 右浮动

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="pull-right">文字浮动到右边</div>

示例 5 : 显示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="show">显示</div>

示例 6 : 隐藏

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="show">显示1</div>
<div class="hidden">隐藏</div>
<div class="show">显示3</div>

示例 7 : 隐藏

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="show">显示1</div>
<div class="invisible">隐藏</div>
<div class="show">显示3</div>