Bootstrap学习笔记3

已于 2022-02-28 21:03:43 修改
阅读量490 收藏
点赞数
分类专栏： 学习笔记 文章标签： bootstrap 学习 html
于 2022-02-28 17:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/123187660
版权

1. 导航条和分页导航

1.1 导航条
1.1.1 导航条基础

​ 在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
     <ul class="nav navbar-nav">
	 	<li class="active"><a href="##">网站首页</a></li>
      <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
        	<li><a href="##">CSS3</a></li>
        	<li class="disabled"><a href="##">PHP</a></li>
        </ul>
     </li>
      <li><a href="##">名师介绍</a></li>
	 </ul>
  <form action="##" class="navbar-form navbar-left" rol="search">
   	<div class="form-group">
   		<input type="text" class="form-control" placeholder="请输入关键词" />
   	</div>
     <button type="submit" class="btn btn-default">搜索</button>
   </form>
</div>
1.1.2 基础导航条

在制作一个基础导航条时，主要分以下几步：

  1. 首先在制作导航的列表(<ul class="nav ">)基础上添加类名“navbar-nav”
  2. 在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”
  3. 而导航条的颜色都是通过“.navbar-default”来进行控制
<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
	 	<li class="active"><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>
1.1.3 为导航条添加标题、二级菜单及状态
<!--加入导航条标题-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
	   <li class="active"><a href="##">网站首页</a></li>
       <li><a href="##">系列教程</a></li>
	 </ul>
</div>
<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	<ul class="nav navbar-nav">
	 	<li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
        	<li><a href="##">CSS3</a></li>
        	<li><a href="##">JavaScript</a></li>
        	<li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
	</ul>
</div>
1.1.4 带表单的导航条

​ 在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">网站首页</a></li>
       <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
        	<li><a href="##">CSS3</a></li>
        	<li class="disabled"><a href="##">PHP</a></li>
          </ul>
      </li>
      <li><a href="##">名师介绍</a></li>
	 </ul>
     <form action="##" class="navbar-form navbar-left" rol="search">
   	    <div class="form-group">
   		   <input type="text" class="form-control" placeholder="请输入关键词" />
   	    </div>
        <button type="submit" class="btn btn-default">搜索</button>
     </form>
</div>
1.1.5 导航条中的按钮、文本和链接
  1. 导航条中的按钮navbar-btn
  2. 导航条中的文本navbar-text
  3. 导航条中的普通链接navbar-link

但是需要和navbar-brand、navbar-nav配合起来使用。

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	 <ul class="nav navbar-nav">
	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
	 </ul>
</div>

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	 <div class="nav navbar-nav">
	 	<a href="##" class="navbar-text">Navbar Text</a>
	 </div>
</div>
1.1.6 固定导航条
  1. .navbar-fixed-top：导航条固定在浏览器窗口顶部
  2. .navbar-fixed-bottom：导航条固定在浏览器窗口底部

使用方法只需要在制作导航条最外部容器navbar上追加对应的类名即可``

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
1.1.7 响应式导航条
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
    	<ul class="nav navbar-nav">
      		<li class="active"><a href="##">网站首页</a></li>
      		<li><a href="##">系列教程</a></li>
	 	</ul>
  </div>
</div>

使用方法：

  1. 保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

  2. 保证在窄屏时要显示的图标样式（固定写法）：

    <button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

  3. 并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定

    // 需要折叠的div代码段：
<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>
// 窄屏时显示的图标代码段：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>
// 也可以这么写，需要折叠的div代码段：
<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>
// 窄屏时要显示的图标：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>
1.1.8 反色导航条

​ 只是将navbar-deafult类名换成navbar-inverse

<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
      <a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
      <li class="active"><a href="">首页</a></li>
      <li><a href="">教程</a></li>
      <li><a href="">关于我们</a></li>
</ul>
</div>
1.2 分页导航
1.2.1 带页码的分页导航

​ 在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法

<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
1.2.2 翻页分页导航

​ 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类

<ul class="pager">
  <li><a href="#">&laquo;上一页</a></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul> 
<!--左右对齐-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一页</a></li>
  <li class="next"><a href="#">下一页&raquo;</a></li>
</ul> 
<!--禁止状态-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>
1.3 标签

​ 在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示

<h3>Example heading <span class="label label-default">New</span></h3> 
<span class="label label-default">默认标签</span>
1.4 徽章

​ 常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现

<a href="#">Inbox <span class="badge">42</span></a>

2. 其他内置组件

2.1 缩略图

​ 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现

<h1>简单的缩略图</h1>
<div class="container">
    <div class="row">
		<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail">
				<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
			</a>
		</div>
		// 重复3个
	</div>
</div>

​ 在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
    </a>
    <div class="caption">
        <h3>Bootstrap框架系列教程</h3>
        <p>Bootstrap框架是一个优秀的前端框，</p>
        <p>
            <a href="##" class="btn btn-primary">开始学习</a>
            <a href="##" class="btn btn-info">正在学习</a>
        </p>
    </div>  
</div>
2.2 警示框
2.2.1 默认警示框

  1. 成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2. 信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3. 警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4. 错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

    <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
2.2.2 可关闭的警示框

使用方法：

  1. 需要在基本警示框“alert”的基础上添加“alert-dismissable”样式

  2. 在button标签中加入**class=“close”**类，实现警示框关闭按钮的样式。

  3. 要确保关闭按钮元素上设置了自定义属性：“data-dismiss=“alert””（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）

    <div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>
2.2.3 警示框的链接

​ Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
2.3 进度条
2.3.1 基本样式

​ Bootstrap框架中提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>
// 结构优化
<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>
  • role属性作用：告诉搜索引擎这个div的作用是进度条。
  • aria-valuenow="40"属性作用：当前进度条的进度为40%。
  • aria-valuemin="0"属性作用：进度条的最小值为0%。
  • aria-valuemax="100"属性作用：进度条的最大值为100%。
2.3.2 彩色进度条
  1. progress-bar-info：表示信息进度条，进度条颜色为蓝色
  2. progress-bar-success：表示成功进度条，进度条颜色为绿色
  3. progress-bar-warning：表示警告进度条，进度条颜色为黄色
  4. progress-bar-danger：表示错误进度条，进度条颜色为红色

使用方法：在基础的进度上增加相应的类名

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
2.3.3 条纹进度条

​ 使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
2.3.4 动态条纹进度条

​ 在进度条“progress progress-striped”两个类的基础上再加入“active”类名

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

注意：：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

2.3.5 层叠进度条

​ 将不同状态的进度条放置在一起，按水平方式排列。当然有一点需要注意，层叠进度条宽度之和不能大于100%，另外条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:15%"></div>
</div>
2.3.6 带Label的进度条

​ 只需要在进度条中添加你需要的值

<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
2.4 媒体对象
2.4.1 默认媒体对象
  • 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
  • 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
  • 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
  • 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

另外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列：十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
    </div>
</div>
2.4.2 媒体对象的嵌套
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="…" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <div>…</div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="…" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media Heading</h4>
                        <div>...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
2.4.3 媒体对象列表

​ Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>
2.5 列表组
2.5.1 基础列表组
  1. list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
  2. list-group-item：列表项，常用的是li元素，当然也可以是div元素
<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
</ul>
2.5.2 带徽章的列表组

​ 只需要在“list-group-item”中添加徽章组件“badge”

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3选择器
    </li>
</ul>
2.5.3 带链接的列表组
// 缺点：链接的点击区域只在文本上有效
<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3选择器</a>
    </li>
</ul>
// 改善
<div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
2.5.4 自定义列表组
  • list-group-item-heading：用来定义列表项头部样式
  • list-group-item-text：用来定义列表项主要内容
<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>
2.5.5 列表项的状态设置
  • active：表示当前状态
  • disabled：表示禁用状态
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
2.5.6 多彩列表组
  1. list-group-item-success：成功，背景色绿色
  2. list-group-item-info：信息，背景色蓝色
  3. list-group-item-warning：警告，背景色为黄色
  4. list-group-item-danger：错误，背景色为红色

使用方法：只需要在“list-group-item”基础上增加对应的类名

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
2.6 面板
2.6.1 基础面板

​ 基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
2.6.2 带有头和尾的面板
  1. panel-heading：用来设置面板头部样式
  2. panel-footer：用来设置面板尾部样式
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>
2.6.3 彩色面板
  1. panel-primary：重点蓝
  2. panel-success：成功绿
  3. panel-info:信息蓝
  4. panel-warning：警告黄
  5. panel-danger：危险红

使用方法：只需要在panel的类名基础上增加自己需要的类名

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
2.6.4 面板中嵌套表格
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <table class="table table-bordered"> 
    	<thead>	// table还可以放在panel-body里面
            <tr>
                <th>＃</th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>
    </table>
    <div class="panel-footer">作者：大漠</div>
</div>
2.6.5 面板中嵌套列表组
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <ul class="list-group"> // list-group可以放在panel-body里
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者：大漠</div>
</div>

3. Bootstrap支持的JavaScript插件

3.1 导入JavaScript插件
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
3.2 动画过渡
3.2.1 模拟弹出框-Modals
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"> // 弹出框头部，包含标题和关闭按钮
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body"> // 弹出框主体，弹出框的主要内容
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer"> // 弹出框脚部，放置操作按钮
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>
3.2.2 模拟弹出框-实现原理
  • 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”
  • Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm"
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
大的模态弹出窗
</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">	// modal-sm
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
3.2.3 触发模拟弹出窗的2中方法

  1. 模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）

    <!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

    注意事项：

    • data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
    • data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

  2. 触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性

    <!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class="btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

为弹出框增加过度动画效果: 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果

模态弹出窗的使用（data-参数说明）:

在这里插入图片描述

<div class="modal fade" id="mymodal-data" data-backdrop="true" data-keyboard="true">
</div>

模态弹出窗的使用（JavaScript触发）：比如3.2.1

3.2.4 JavaScript触发时的参数设置
  1. 属性设置：

在这里插入图片描述

案例：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

  1. 参数设置：

    在这里插入图片描述

  2. 事件设置：

    在这里插入图片描述

    调用方法：

    $('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})
3.3 插件

学习网址：https://how2j.cn/k/boostrap/boostrap-modal/502.html

栀虞子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
Bootstrap学习笔记4
qq_52476758的博客
03-02 1051
1. 下拉菜单与滚动监视器1.1 下拉菜单1.1.1 属性声明式方法1.1.2 JavaScript触发方法1.2 滚动监视器1.2.1 滚动监控器的设计1.2.2 声明属性触发滚动监控1.2.3 在body中加监控1.2.4 JavaScript方法触发滚动监控器2. 选项卡、提示框和弹出框2.1 选项卡-Tabs2.1.1 选项卡的结构2.1.2 触发切换效果2.1.3 为选择卡添加fade样式2.1.4 胶囊式选项卡（nav-pills）2.1.5 JavaScript触发方法2.2 提示框-Too.
bootstrap学习笔记一
qq_46095916的博客
03-30 138
一、下载bootstrap 二、解压缩包 三、把得到的三个文件夹复制到vscode工作文件夹中 四、bootstrap概述 bootstrap是一个前端开发的框架，简介灵活 框架是一个半成品软件，开发人员可以在框架的基础上再进行开发，简化编码 好处：定义了很多css样式和js插件 五、bootstrap快速入门 bootstrap中文文档给出的基本模板 <!doctype html> <html lang="zh-CN"> <head>
BootStrap学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 913
二、安装和使用 参考API：http://v3.bootcss.com/css/ 类用于100% 宽度，占据全部视口（viewport）的容器 02 栅格网格系统 BootStrap 提供了一套响应式、移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或
bootstrap学习笔记
qq_44973993的博客
08-15 244
bootstrap什么是 bootstrap？bootstrap 包的内容bootstrap的安装boostrap使用的注意点boostrapCSS具体使用（只演示部分其余的看文档）按钮表格图片自定义boostrapCSS网格（栅格）系统Bootstrap 网格系统（Grid System）的工作原理表单表单布局垂直或基本表单内联表单水平表单辅助类boostrap布局组件具体使用（只演示部分其余的看文档）导航栏警告框进度条分页字体图标boostrap插件具体使用（只演示部分其余的看文档）轮播模态对话框 什么
Bootstrap5学习笔记
李世铭的博客
05-03 1377
Bootstrap 教程 | 菜鸟教程 Bootstrap5支持主要的最新版本浏览器，不支持InternetExplorer11及以下版本。Bootstrap5不再依赖jQuery，使用了原生的JavaScript。两个容器类 .container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。 Bootstrap提供了一些间距...
bootstrap学习笔记3
one_way_cong的博客
11-07 127
bootstrap提供了许多页面内容排版的修饰类，例如给inline属性文本赋予标题的样式，在标题里还有使用标签或.small类来添加副标题，将全局font-size设置14px，line-height为1.428。这些属性直接赋给和所有段落元素。bootstrap提供了各种各样强调样式，例如通过增加font-weight强调一段文本，使用标签，用斜体强调一段文本，使用标签，通过文本对齐类，可以简...
Bootstrap学习笔记 01 - 开始
Cynhard的专栏
10-31 425
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --> <!DOCTYPE html> <html> <head> <!-- 使用 utf-8
mysql存储过程教程视频，Bootstrap学习笔记
2401_84010165的博客
04-19 639
container-fluid是百分百宽度。
Bootstrap学习笔记3--图片样式
清风Python
06-02 172
处女座的通病 作为十二星座中，一直被各种嘲讽的处女座，坦白说真的活得好累。 最近对Bootstrap框架比较着迷，之前写一些前台的页面，都是用Sublime Text3简单用用就好。这几天在看Bootstrap的相关视频，视频里面这个用Atom那个用WebStorm，更有甚者连Brackets和Hbuilder都上了。 看到他们一个个的编辑器用起来感觉好炫酷，心想一定要找个最最最适...
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
FME学习之旅---day27
summer_corner的博客
05-17 257
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
引用实战学习
qiuzhiuser的博客
05-19 117
【代码】引用实战学习。
学习kong官方文档
好好学习日记
05-17 311
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
sheng的学习笔记-AI-贝叶斯（Bayesian）分类
最新发布
coldstarry的专栏
05-23 522
贝叶斯网络，贝叶斯算法，朴素贝叶斯分类器，半朴素贝叶斯分类器，拉普拉斯修正

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值