bootstrap
bootstrap
全栈开发
全栈开发工程师,互联网教育特约讲师
展开
-
bootstrap专栏 01.bootstrap简介
# 01.引入bootstrap[toc]{type: "ol", level: [3]}### 引入bootstrap- 设置移动设备优先```html<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">```- bootstrap.css```html<link rel="stylesheet" href="../css/bootstrap.c...原创 2022-03-16 20:10:07 · 60 阅读 · 0 评论 -
bootstrap专栏 02.栅格与弹性布局 01.栅格布局
# 01.栅格布局[toc]{type: "ol", level: [3,4]}### css结构```css.row { border: solid 2px brown; margin: 10px 0;}/*覆盖自带的列属性*/.col-sm, .col-sm-2, .col-sm-8 { border: solid 1px brown; background: goldenrod;}```### 固体布局> 容器布局可以嵌套,但是...原创 2022-03-16 20:12:13 · 164 阅读 · 0 评论 -
bootstrap专栏 02.栅格与弹性布局 02.栅格等级
# 02.栅格等级[toc]{type: "ol", level: [3,4]}### css结构```css.row { border: dashed 4px goldenrod; margin: 10px 0;}.ca { border: solid 2px brown;}```### 等级分类#### col- **超小屏幕**{style="color:green"} <576px#### col-s...原创 2022-03-16 20:13:31 · 100 阅读 · 0 评论 -
bootstrap专栏 02.栅格与弹性布局 03.flex弹性布局
# 03.flex弹性布局[toc]{type: "ol", level: [3,4]}### 概念> 用于模块内布局### 行内布局#### 基础布局- justify-content> 行内的内容,设置对齐方式- **start**{style="color:brown"} 左对齐- **center**{style="color:goldenrod"} 居中对齐- **end**{style="color:gree...原创 2022-03-16 20:15:00 · 266 阅读 · 0 评论 -
bootstrap专栏 03.图文处理 01.文字处理
# 01.文字内容排版[toc]{type: "ol", level: [3,4,5]}### 标题#### 普通标题- hn **(1-6)**{style="color:grey"}```html<h1>h1</h1>...```#### 附属标题```html<h2>h2<small>hello world</small>h2</h2>```#### 浅色标题```html<h3&...原创 2022-03-16 20:19:21 · 103 阅读 · 0 评论 -
bootstrap专栏 03.图文处理 02.图文排版
# 02.图文排版[toc]{type: "ol", level: [3,4]}### 代码排版- pre-scrollable> 添加滚动条- code> 代码区域- var> 字体倾斜- kbd> 键盘标识```html<pre class="pre-scrollable" style="width: 600px; height: 200px"> <code> def func1(x,y){...原创 2022-03-17 22:48:20 · 313 阅读 · 0 评论 -
bootstrap专栏 04.元素属性设置 01.显示与隐藏
# 01.显示与隐藏[toc]{type: "ol", level: [3]}### 显示与隐藏- 显示:block> d-{lg,xl}-block> 在lg,xl...设备上显示元素- 隐藏:none> d-{sm,md...}-none> 在xs,sm,md...设备上隐藏元素```html<p class="d-none d-md-block d-xl-none">我只在md和lg屏幕上显示</p>```...原创 2022-03-17 22:57:41 · 646 阅读 · 0 评论 -
bootstrap专栏 04.元素属性设置 02.颜色与边框
# 02.颜色与边框[toc]{type: "ol", level: [3,4]}### css结构```css.wh { width: 600px; height: 150px; background: #86cfda; margin: 10px 0;}```### 设置颜色- text-primary> 设置文本颜色- success info- warning danger- primary secondary- dark ...原创 2022-03-17 22:59:19 · 338 阅读 · 0 评论 -
bootstrap专栏 04.元素属性设置 03.浮动与定位
# 03.浮动与定位[toc]{type: "ol", level: [4]}#### css结构```css.wh { width: 400px; height: 200px; background: #86cfda; margin: 10px 10px;}#d1 { border: 2px brown dashed;}```#### 关闭按钮```html<button class="close"><span&g...原创 2022-03-17 23:00:57 · 462 阅读 · 0 评论 -
bootstrap专栏 04.元素属性设置 04.边距与阴影
# 04.边距与阴影[toc]{type: "ol", level: [3]}### css结构```css.wh { width: 300px; height: 200px; background: #8fd19e;}span { background: #1c7430; display: inline-block;}```### 边距设定- 可具体指定某个边> pt-1> pt上 pb下 pl左 pr右 px...原创 2022-03-17 23:02:22 · 1181 阅读 · 0 评论 -
bootstrap专栏 05.表格与表单 01.表格
# 01.表格[toc]{type: "ol", level: [3]}### 表格- table> 添加表格样式- table-striped> 隔行换色- table-bordered> 表格边框- table-hover> 悬停加深- align> 设置文本在表格中的对齐方式> align-top align-middle align-bottom```html<!-- 添加表格样式 隔行换色 ...原创 2022-03-17 23:04:30 · 159 阅读 · 0 评论 -
bootstrap专栏 05.表格与表单 02.表单
# 02.表单[toc]{type: "ol", level: [3]}### 表单- form-control> 添加表单控制选项 占据标签所在区域的最大值- btn-block> 占满整个区域- 居中显示```css.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}``````html<div ...原创 2022-03-17 23:05:12 · 106 阅读 · 0 评论 -
bootstrap专栏 06.组件 01.警告提示框
# 01.警告提示框[toc]{type: "ol", level: [3]}### 设置样式- alert-success> 设置背景或字体颜色```html <!--使背景色为浅绿色--> <div class="alert alert-success"> 前往地址: <!--使字体颜色与背景色协调一致--> <a href="https://www.baidu.co...原创 2022-03-17 23:07:29 · 112 阅读 · 0 评论 -
bootstrap专栏 06.组件 02.徽章和面包屑导航
# 02.徽章和面包屑导航[toc]{type: "ol", level: [3,4]}### 徽章#### 普通徽章- badge> 设置为徽章```html<h1><span class="badge badge-success">ideas.top</span></h1>```#### 圆角徽章- badge-pill> 将两侧设置为圆角形状```html<h1><span class=...原创 2022-03-17 23:09:55 · 81 阅读 · 0 评论 -
bootstrap专栏 06.组件 03.按钮和按钮组
# 03.按钮和按钮组[toc]{type: "ol", level: [3,4]}### 按钮#### 实心按钮- btn> 默认为实心```html<button class="btn btn-success">按钮</button>```#### 空心按钮- btn-outline```html<button class="btn btn-outline-dark">按钮</button>```#### 小...原创 2022-03-17 23:11:58 · 239 阅读 · 0 评论 -
bootstrap专栏 06.组件 04.卡片1
# 04.卡片一[toc]{type: "ol", level: [4]}### 卡片#### 设置卡片```html<div class="card" style="width: 200px"> <!--将内容写入卡片框架中--></div>```#### 卡片头部```html<div class="card-header"> 卡片头部</div>```#### 卡片内容```html...原创 2022-03-17 23:14:01 · 82 阅读 · 0 评论 -
bootstrap专栏 06.组件 05.卡片2
# 05.卡片二[toc]{type: "ol", level: [3,4]}### 卡片#### 横向导航- nav-tabs> 设置为横向导航- active> 默认激活状态- disabled> 不可点击```html <div class="card w-25"> <div class="card-header"> <!--变为横向列表导航--> ...原创 2022-03-17 23:15:33 · 67 阅读 · 0 评论 -
bootstrap专栏 06.组件 06.列表组和旋转图标
# 06.列表组和旋转图标[toc]{type: "ol", level: [3]}### 列表组```html<ul class="list-group list-group-horizontal-lg"> <li class="list-group-item active w-25">列表组1</li> <li class="list-group-item w-25">列表组2</li> <li ...原创 2022-03-17 23:16:57 · 173 阅读 · 0 评论 -
bootstrap专栏 06.组件 07.轮播图
# 07.轮播图[toc]{type: "ol", level: [3]}### 轮播图```html<div id="carouselExampleCaptions" class="carousel slide w-100" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-sli...原创 2022-03-17 23:20:03 · 70 阅读 · 0 评论 -
bootstrap专栏 06.组件 08.手风琴
# 08.手风琴[toc]{type: "ol", level: [3]}```html<div class="accordion" id="accordionExample"> <!--卡片1--> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...原创 2022-03-17 23:21:25 · 213 阅读 · 0 评论 -
bootstrap专栏 06.组件 09.下拉菜单
# 09.下拉菜单[toc]{type: "ol", level: [3]}### 下拉菜单```html<div class="btn-group"> <!--菜单按钮--> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action </b...原创 2022-03-17 23:22:30 · 66 阅读 · 0 评论 -
bootstrap专栏 06.组件 10.导航条
# 10.导航条[toc]{type: "ol", level: [3]}### 导航条```html<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-con...原创 2022-03-17 23:23:40 · 151 阅读 · 0 评论 -
bootstrap专栏 06.组件 11.滚动监听
# 11.滚动监听[toc]{type: "ol", level: [3]}### 滚动监听```html<div id="list-example" class="list-group" style="width: 600px; height:200px; float: left"> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a&g...原创 2022-03-17 23:24:53 · 79 阅读 · 0 评论 -
bootstrap专栏 06.组件 12.巨幕
# 12.巨幕[toc]{type: "ol", level: [3]}### 巨幕```html<div class="jumbotron"> <!--标题--> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component...原创 2022-03-17 23:26:13 · 271 阅读 · 0 评论 -
bootstrap专栏 06.组件 13.分页
# 13.分页[toc]{type: "ol", level: [3]}### 分页```html<nav aria-label="Page navigation example"> <ul class="pagination"> <!--上一页--> <li class="page-item"><a class="page-link" href="#">Previous</a>...原创 2022-03-17 23:27:31 · 66 阅读 · 0 评论 -
bootstrap专栏 06.组件 14.折叠
# 14.折叠[toc]{type: "ol", level: [3]}### 折叠```html<p> <!--链接--> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> ...原创 2022-03-18 17:51:10 · 106 阅读 · 0 评论 -
bootstrap专栏 06.组件 15.轻量弹框
# 15.轻量弹框[toc]{type: "ol", level: [3]}### 轻量弹框```html<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <!--弹框logo--> <img src="" c...原创 2022-03-18 17:53:33 · 178 阅读 · 0 评论 -
bootstrap专栏 06.组件 16.模态框
# 16.模态框[toc]{type: "ol", level: [3]}### 模态框```html<div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <!--模态框头部--> <div class="modal-header"> ...原创 2022-03-18 17:54:52 · 76 阅读 · 0 评论