Bootstrap
关注
分享
扫一扫
gyuei
专栏内容均为个人笔记
展开
-
Bootstrap 实例 - 轮播（Carousel）插件
示例代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"&g原创 2020-05-29 19:01:15 · 657 阅读 · 0 评论 -
Bootstrap popover在hover状态下移动到弹出层上不消失
目的：鼠标在hover状态下移动到弹出层，弹出层内容不消失且可以进行其他操作示例代码如下：$(function() { $(".hx-list_two").popover({ trigger: "manual", html: true, animation: false, content: `<ul class="wehx-popover_box"> <li class="wehx-popover_item"> <a href="">原创 2020-05-14 18:57:53 · 1655 阅读 · 0 评论 -
Bootstrap之nav导航栏默认选中某一项
代码实例：<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <原创 2020-05-14 18:05:09 · 2920 阅读 · 2 评论 -
Bootstrap输入框组---搜索框实例
搜索框样式1<div class="col-lg-2 col-md-3 col-sm-3 col-xs-4 pull-right"> <div class="input-group"> <input type="text" class="form-control" placeholder="输入搜索内容"> <span class="in...原创 2020-03-17 16:25:23 · 4261 阅读 · 0 评论 -
table表格固定表头，内容滚动显示
目的：做一个table表格，实现固定标题行而内容可滚动html部分代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href...原创 2020-03-16 17:42:57 · 1674 阅读 · 0 评论 -
Bootstrap中的栅格系统布局
注意：所有“列（.col-md-* 栅格类）必须放在 ” .row 内原创 2019-12-17 16:13:50 · 135 阅读 · 0 评论 -
Bootstrap默认的弹出框(popover)
弹出框的实现：1.向某个标签添加data-toggle="popover"2.通过 JavaScript 启用弹出框(popover):$(function (){$("[data-toggle='popover']").popover({});});实例如下：html部分如下：<button type="button" class="btn btn-default" data...原创 2019-12-06 13:58:58 · 689 阅读 · 0 评论 -
Bootstrap弹出框(popover)中插入图片
目的：鼠标滑过按钮时，按钮底部出现相应的图片弹出框。效果图如下：html部分代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=d...原创 2019-12-06 13:47:03 · 4375 阅读 · 0 评论 -
Bootstrap模态框嵌模态框(多层模态框)的实现
以下实例用于创建多层模态框的嵌套效果:1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download)2.在页面内head标签内引入样式库bootstrap.min.css3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js，例如：<head> <meta ...原创 2019-11-27 11:05:03 · 1847 阅读 · 0 评论 -
Bootstrap模态框的关闭
目的：点击取消按钮时关闭模态框代码如下：<button type="submit" >发送</button><button type="button" data-dismiss="modal">取消</button>给button按钮加data-dismiss="modal"后，点击取消按钮可以关闭模态框...原创 2019-11-23 11:13:32 · 1681 阅读 · 0 评论 -
Bootstrap模态框modal的实现
以下实例创建模态框效果:1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download)2.在页面内head标签内引入样式库bootstrap.min.css3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js，例如：<head> <meta chars...原创 2019-11-07 10:13:19 · 323 阅读 · 0 评论