BootStrap（四）

左手的ㄟ右手 2022-06-07 10:13 149阅读 0赞

## BootStrap（四） ##

下面主要说一些 js事件调用 ：

**1.**下拉菜单的js调用  
元素.dropdown() 和 元素.dropdown(‘toggle’)  
不好用 不多用

**2.**提示标语 tooltip  
使用：先写一个a标签 最普通的  
在这个a标签中 可以设置 title  
data-placement 等等 具体 有：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]

同时 添加 js 元素.tooltip()

当然 也可以不加 data-\*

直接在js中

元素.tooltip({
            //除掉data-
            placement:'right'
            .....
            })

还有一些js 前后事件 用的时候再看

**3.**弹出框  
弹出框的使用  
首先定义一个button 最普通的按钮  
然后添加js 元素.popover()  
这个弹出框的用法和提示标语tooltip很相似  
直接上图：  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

在js中的使用 同上

**4.**警告框  
可用js 去除 alert-dismissable 和 data-dismiss=’alert’

代码 如下：

<div id="alert" class="alert alert-danger">
            <button class="close" >×</button>
            ooo
      </div>
             //js代码
          $(".close").on('click',function(){ 
            $("#alert").alert('close')
        })

[SouthEast]: /images/20220607/82433f8cbf0f407a90497e29811737d6.png
[SouthEast 1]: /images/20220607/0e5a6bc11936408bb1dd32a8cf44bddb.png
[SouthEast 2]: /images/20220607/b8701786710a40f4a037a18e3571b883.png
[SouthEast 3]: /images/20220607/f862fe811f7b4e6faa617f4affe78f44.png

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap简单使用(四)按钮

runoob.com/bootstrap/bootstrap-tutorial.html 菜鸟教程 bootstrap教程简单记录 bootstrap的按钮标签

亦凉/ 2023年06月26日 05:33/ 0 赞/ 23 阅读

相关前端学习笔记(四)前端框架之bootstrap

什么是Bootstrap Bootstrap是前端的一款开发框架，来自于Twitter公司，他的简介灵活，使得web开发更加快捷。 bootstrap的优点 1.

偏执的太偏执、/ 2022年11月20日 08:12/ 0 赞/ 311 阅读

相关 Bootstrap Table使用整理（四）-工具栏

一、启用默认支持的工具栏 / data-search 是否显示搜索框 data-show-refresh 是否像是刷新按钮,注：刷新操作会重新请求

电玩女神/ 2022年06月14日 03:46/ 0 赞/ 211 阅读

相关 BootStrap（四）

BootStrap（四）下面主要说一些 js事件调用： 1.下拉菜单的js调用元素.dropdown() 和元素.dropdown(‘toggle’)

左手的ㄟ右手/ 2022年06月07日 10:13/ 0 赞/ 150 阅读

相关 Bootstrap基础入门(第四篇)

Bootstrap基础入门(四) 一、Bootstrap实现表格 1. 表格结构 ![20180312143549828][] 2.<table>上的类

曾经终败给现在/ 2022年05月30日 12:16/ 0 赞/ 331 阅读

相关 angular6学习(四)：引入bootstrap样式框架

两种方法：第一种：引用链接 1、在index.html中添加bootstrap引用链接 bootstrap链接地址可在官网复制：[官网][Link 1] 引用的链接

秒速五厘米/ 2022年05月08日 23:06/ 0 赞/ 376 阅读

相关 Bootstrap学习笔记（四）插件

小知识点：盲人、智力低下、行动障碍等H5标签中有两类属性与“无障碍阅读”相关： (1)<ANY role=""> <b role="button"></b

超、凢脫俗/ 2022年04月06日 13:01/ 0 赞/ 375 阅读

相关 bootstrap学习（四）输入框、导航

输入框组：基本用法： //form-control 占满 //input-group:输入框组 //input-group-addon

骑猪看日落/ 2022年01月06日 14:57/ 0 赞/ 255 阅读

相关 BootStrap实战四之网站内容添加（下）

网站内容（右）代码： <aside class="col-md-4 sidebar"> <div class="wid

￡神魔★判官ぃ/ 2021年09月13日 23:14/ 0 赞/ 250 阅读

相关 BootStrap实战四之网站内容添加（上）

网站内容代码： <section class="content-wrap"> <div class="container">

冷不防/ 2021年09月13日 23:14/ 0 赞/ 280 阅读