Bootstrap 基本样式-其他

最新推荐文章于 2021-12-20 14:45:24 发布

litengbin

最新推荐文章于 2021-12-20 14:45:24 发布

阅读量215

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 关闭按钮 close
2 : 下拉菜单的按钮 caret
3 : 左浮动 pull-left
4 : 右浮动 pull-right
5 : 显示 show
6 : 隐藏 hidden
7 : 隐藏 invisible

关闭按钮close

关闭按钮，一般用于切换效果

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
   <button type="button" class="close" aria-hidden="true">
      ×;//即可以用&times表示
   </button>

下拉菜单的按钮caret

下拉菜单的按钮

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

左浮动pull-left

左浮动，相当于css中的float:left

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

右浮动pull-right

右浮动，相当于css中的float:right

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

显示show

强行显示

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

隐藏hidden

强行隐藏，会把该元素的位置也让出来

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

隐藏invisible

强行隐藏，该元素的位置会保留

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

litengbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 基本样式-其他

1 : 关闭按钮 close2 : 下拉菜单的按钮 caret3 : 左浮动 pull-left4 : 右浮动 pull-right5 : 显示 show6 : 隐藏 hidden7 : 隐藏 invisible 关闭按钮close关闭按钮，一般用于切换效果 ×;//即可
复制链接

扫一扫

专栏目录