BootStrap系列教材（九）- 基本样式

工具版本兼容问题

效果	说明	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="close" aria-hidden="true"> × </button>	关闭按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <span class="caret"></span>	下拉菜单的按钮	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="pull-left">文字浮动到左边</div>	左浮动	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="pull-right">文字浮动到右边</div>	右浮动	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="show">显示</div>	显示	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>	隐藏	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>	隐藏	示例代码

示例 1 : 关闭按钮
示例 2 : 下拉菜单的按钮
示例 3 : 左浮动
示例 4 : 右浮动
示例 5 : 显示
示例 6 : 隐藏
示例 7 : 隐藏

示例 1 :

关闭按钮

edit 顶折

纠问

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

运行效果

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

下拉菜单的按钮

edit 顶折

纠问

下拉菜单的按钮

运行效果

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

左浮动

edit 顶折

纠问

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

运行效果

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

右浮动

edit 顶折

纠问

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

运行效果

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

显示

edit 顶折

纠问

强行显示

运行效果

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

隐藏

edit 顶折

纠问

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

运行效果

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

隐藏

edit 顶折

纠问

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

运行效果

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

BootStrap系列教材（八）- 基本样式 - 背景

BootStrap系列教材（十）- 基本样式 - 栅格布局

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2018-10-31 &times是什么意思》？

图腾不息	关于前端部分-BootStrap-其他的提问不懂这个是什么意思

3 个答案

icoffee
答案时间：2019-04-29

html里的特殊字符：乘号的表示方法&times；

jeddzd
答案时间：2019-02-16

就是x这个符号的意思

jeddzd
答案时间：2019-02-16

就是x这个符号的意思

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-08-04 ×干嘛的

xieyan

关于前端部分-BootStrap-其他的提问

2 个答案

icoffee
答案时间：2019-04-29

html里特殊符号乘号的表示方法：×

duqich
答案时间：2018-08-10

你猜

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-03-12 站长你的输入框绑定的事件是hover()，我想选中一部分复制的时候，鼠标移出输入框也触发全选，有点难受。哈哈

2017-08-01 aria-hidden="true"是什么意思啊

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-BootStrap-其他的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图