![](https://img-blog.csdnimg.cn/20210413165105926.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
bootstrap
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
bootstrap 原理以及使用方式
meta 标签的作用,将页面大小,根据分辨率不同进行相应的调节,以展示给用户相同大小的内容 meta默认视口大小约为980px content="width=device-width initial-scale=1.0 use-scalable=no " width:是设置网页的宽度,等于设备的宽度 在iPhone或者iPad上横竖屏的宽度等于竖屏的宽度 initial-scale: 设置初始化视口的缩放比 在windows系统的ie浏览器上的横竖屏的宽度...原创 2020-06-18 11:51:05 · 527 阅读 · 0 评论 -
bootstrap 插件 字体图标库 按钮库 日期插件
================字体图标(3.x的版本可以使用250个免费,4.x不可以使用)====================== 使用方法: 外部引用 bootstrap css,引入字体文件,font文件夹 //glypicon 基础样式 <span class="glypicon glyphicon-heart"></span> 设置大小和背景 和文字的设置方式一样 按.原创 2020-06-06 22:16:37 · 448 阅读 · 0 评论 -
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
进度条: 引用外部的样式 bootstrap 的css 即可 使用方法: 使用类名 process <div class="contanier"> <div class="row"> <div class="col"> // 高度需要加在父级上 <div class="process"> // 进度条 需要使用宽度 例如:.原创 2020-06-03 21:46:09 · 767 阅读 · 0 评论 -
bootstrap 组件之分页 提示框 提示工具组件
分页: 外部引用: 只需要引用css 即可 使用方法: 使用类名pagination 每一个li使用 page-item 列如: <ul class="pagination"> // disable 禁用 <li class="page-item disable"><a href="#" class="page-link">上一页</a></li> // activ.原创 2020-06-03 20:34:19 · 275 阅读 · 0 评论 -
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap 组件之 媒体对象(图文混排)、 导航组件</title> <link rel="sty原创 2020-06-01 21:47:51 · 963 阅读 · 0 评论 -
bootstrap 组件 之模态框组件
模态框(弹出层)// 需要使用jq bootstrap.js使用类名 modal基本使用方法:<div class="container"> <div class="row mt-5"> //data-taggle 使用这个属性来根默认的bootstrap js 交互 data-target 用于显示的模态框 如果使用的是a标签, 那么使用href即可 <div class="col"><bu原创 2020-05-31 17:15:57 · 319 阅读 · 0 评论 -
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
输入框组: from-group input-group // 前置带icon input-group-prepend input-group-text 使用方法: <div class="container"> <div class="form-row"> <div class="col"> <div class="form-group input原创 2020-05-30 20:43:16 · 425 阅读 · 0 评论 -
bootstrap 组件之表单 组件学习总结
表单 form标签 // 基本用法 <div class="container"> <div class="row"> <div class="col"> <form action="#"> // 使用表单组的类名 form-group, 放置一组表单 ...原创 2020-05-27 20:59:22 · 376 阅读 · 0 评论 -
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
轮播图组件 使用类名carousel 使用carousel就是相对定位,使用在父级上 基本用法: <div class="container"> <div class="row col"> // carousel 就是父级,使用的是相对定位 slide是左右滚动,不加的话有点像幻灯片 carousel-fade 轮播图是否需要过渡 必须要使用slide原创 2020-05-26 21:39:28 · 597 阅读 · 0 评论 -
bootstrap 组件之卡片总结
card 在bootstrap3.x的版本是没有, 在bootstrap4.x里面才会有 card支持自动响应式 使用类名card 来标记为card 使用方法: <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="card"> // 图片需要和card原创 2020-05-24 22:28:24 · 1835 阅读 · 0 评论 -
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
//警告框 使用类名 alert 使用方法:颜色有8个, 需要额外添加类名 alert-primary/success/danger 等 <div class="container"> <div class="alert alert-primary"> // 这里面可以添加额外的内容, 链接,随心所欲等 </div> </div> 可以关闭的警告框: 使用类名 ...原创 2020-05-24 21:33:01 · 375 阅读 · 0 评论 -
bootstrap 工具类名总结 适合初学者
// 边框 添加边框 使用类名 border(四周加上边框) border-top border-left border-bottom border-right 去掉边框 使用类名 border-0(删除四周的边框) border-top-0 border-left-0 border-bottom-0 border-right-0 边框颜色 使用类名 在使用border的类名上 在添加 border-primary border-secondary bordde原创 2020-05-24 10:08:04 · 1102 阅读 · 0 评论 -
bootstrap 内容总结
bootstrap 中的css根节点里面生命了许多的变量: 如: :root{ --bule: xxx, --yellow: xxx } 使用方法: 使用的时候使用 样式属性:var(--bule), 使用关键字var 来取出样式的key,就可以使用变量css了 // bootstrap 给所有的元素都变成怪异盒模型, 这样设置宽高不会增加盒子的大小 *,::after,::before{ box-sizi.原创 2020-05-23 11:22:20 · 286 阅读 · 0 评论 -
bootstrap栅格系统的使用 适合初学者
/ 栅格系统底层依托于媒体查询 使用栅格系统最外层必须使用: container-fluid: 宽度是100%,取的是body的宽度 <div class="container-fulid"> // 行 <div class="row"> // col-1自动,默认大小是小于576px 后面的数字是占用多少列 col-sm-1 默认是大于576px col-md-1 默认是大于768px原创 2020-05-23 09:27:41 · 519 阅读 · 0 评论 -
bootstrap简介 原理
bootstrap简介===========一个响应式的框架(自适应), pc端网站使用下降,移动端使用的网站上升4.3.1 最新版本 3.3.7是一个过渡版本下载3.3.7 版本的一共有3个文件夹: js css fontcss里面有的文件带了.map的后缀,是为了方便打包后调试作用的带了.min名字的是,一个压缩后的文件,比较小下载4.3.1版本就只有js 和css使用方法: header上面需要引用 meta 标签,响应式必备引用jquery在所有js的前面,因为bootstrap是原创 2020-05-18 22:53:21 · 2105 阅读 · 0 评论