![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
bootstrap --- > 表格
几个可选类:.table-bordered: 为表格加上边框.table-striped: 为表格加上斑马效果.table-hover: 鼠标悬停在表格行上时展现不同得颜色.table-condensed: 更为紧凑的表格样式// 导入样式,从bootstrap官网导入CDN// HEAD<link rel="stylesheet" href="https://cdn.boo...转载 2019-04-08 15:16:50 · 543 阅读 · 0 评论 -
bootstrap --- > 表单
// HTML >>> 第一种样式<!DOCTYPE html><html><head> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn538...转载 2019-04-08 15:42:15 · 129 阅读 · 0 评论 -
bootstrap --- > 按钮
<head> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRA...转载 2019-04-08 16:10:54 · 297 阅读 · 0 评论 -
bootstrap --- > 分页
// bootstrap中给无序列表的ul元素添加pagination类即可.<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</...转载 2019-04-08 20:30:29 · 975 阅读 · 0 评论 -
bootstrap --- > 面板
基本样式<div class="panel panel-default"> <div class="panel-heading">面板头...</div> <div class="panel-body">面板身体...</div> <div class="panel-footer">面板脚...</div...转载 2019-04-08 21:28:40 · 152 阅读 · 0 评论 -
bootstrap --- > 弹出对话框
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击触发模态对话框</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidde...转载 2019-04-09 09:10:00 · 1368 阅读 · 0 评论 -
bootstrap --- > 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现…首先导入bootstrap的依赖:jquery的依赖、bootstrap的依赖注意: jquery的依赖要在bootstrap依赖的前面导入,原因是:bootstrap的某些功能是在jquery的基础上实现的在 https://www.bootcdn.cn/jquery/ 导入jquery的CDN<script ...转载 2019-04-09 09:34:43 · 13041 阅读 · 2 评论 -
bootstrap --- > 鼠标停留提示事件
使用bootstrap可以很简单的实现鼠标停留,提示的效果<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right" class="btn btn-primary">工具提示</a>data-toggle=“tooltip”:代表了提示类data-placem...转载 2019-04-09 09:41:40 · 2586 阅读 · 0 评论