Bootstrap
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
Bootstrap组件——加载、推送
加载、推送一、加载1.基础2.圆型3.尺寸4.填充二、推送1.基础2.位置3.data选项4.方法与事件一、加载1.基础<div class="col"> <div class="spinner-border"></div> <div class="spinner-border text-primary"></div> <div class="spinner-border text-secondary"></div&g原创 2020-08-01 11:17:24 · 709 阅读 · 0 评论 -
Bootstrap组件——进度条、滚动监控
进度条、滚动监控一、进度条1.基础2.高度3.背景4.多进度条进度(嵌套)5.条纹进度指示6.动画条纹进度条二、滚动监听1.在navbar导航中2.嵌套的导航3.列表组4.事件一、进度条1.基础使用 .progress 容器来指定进度条的最大值。使用 .progress-bar 来表示当前的进度。.progress-bar 要求的内嵌样式,使用全局实用CSS或自定义CSS来设置其宽度。<div class="progress"> <!-- .progress-ba原创 2020-08-01 09:43:56 · 1752 阅读 · 0 评论 -
Bootstrap——提示框、提示冒泡
提示框、提示信息一、提示框1.基本2.方向3.禁用元素弹出提示框4.焦点失去5.data属性6.方法与事件二、提示冒泡1.基础2.方向3.禁用4.data属性5.方法与事件一、提示框1.基本<div class="row mt-5"> <div class="col"> <button class="btn btn-danger" data-toggle="popover" title="这里放的是提示框的标题" data-content="这里放的是提示框的内容"原创 2020-07-31 23:41:09 · 1952 阅读 · 0 评论 -
Bootstrap——导航栏
导航栏一、导航栏1.基本2.表单3.文本处理4.配色方案5.居中容器6.定位7.响应式8.拓展一、导航栏1.基本导航栏需要使用.navbar 来定义,并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。<nav class="navbar navbar-expand-lg bg-light"> <a href="#" class="navbar-brand"> <img src="http://原创 2020-07-31 18:14:55 · 1860 阅读 · 0 评论 -
Bootstrap组件——导航
导航一、导航1.基本2.水平对齐3.垂直对齐4.Tabs标签5.胶囊式(eugk)标签6.内容定宽高7.等宽8.弹性布局9.结合下拉菜单10.选项卡11.垂直形式的选项卡12.方法与事件一、导航1.基本基础.nav组件采用Flexbox弹性布局构建,并为构建所有类型的导航组件提供了坚实的基础。<div class="row"> <div class="col"> <ul class="nav"><!-- 基础类,变成弹性盒模型 --> &l原创 2020-07-31 16:07:11 · 906 阅读 · 0 评论 -
Bootstrap组件——模态弹窗
模态弹窗一、模态弹窗1.基本2.垂直居中3.包含栅格系统4.模态框相同内容不同5.尺寸大小6.data属性7.Tooltips工具提示和弹出提示框8.方法与事件一、模态弹窗弹出模态框是用HTML、CSS和Javascript构建的,它们位于文档中其它表现元素之上,并从<body>中删除滚动事件,以便模态框自身的内容能得到滚动。点击模态框的“backdrop”(灰背景区域),将自动关闭动态模块框。Bootstrap一次只支持一个模态窗口,不支持嵌套模式,因为我们相信那样叠加会造成用户体原创 2020-07-31 11:01:52 · 1778 阅读 · 1 评论 -
Bootstrap组件——超大屏、列表
超大屏、列表一、超大屏1.基础2.全屏二、列表1.基本2.链接和按钮3.Flush紧致贴齐4.背景色5.配合徽章6.自定义内容7.选项卡8.方法与事件一、超大屏通过引用.jumbotron方法,实现构建超大的Hreo界面,醒目的在网站上展示关键的营销信息,轻量、灵活。1.基础<div class="container"> <div class="row"> <div class="col"> <div class="jumbotron">原创 2020-07-31 10:31:28 · 1258 阅读 · 0 评论 -
Bootstrap组件——输入框
输入框一、输入框1.基本2.尺寸3.多选框和单选框4.多个输入框与多个额外组件5.按钮组合6.带下拉列表的按钮组合7.分离式按钮8.自定义表单组合9.自定义文件一、输入框1.基本<div class="form-row"> <div class="col"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="in原创 2020-07-30 22:05:08 · 2594 阅读 · 0 评论 -
Bootstrap组件——表单
表单一、表单1.基础表单2.大小规格3.只读属性4.表单栅格排列5.表单表格式的排列6.水平排列表单7.内联表单二、验证1.验证2.自定义表单样式一、表单1.基础表单使用.form-check 可以格式化复选框和单选框按钮,用以改进它们的默认布局和动作呈现,复选框用于在列表中选择一个或多个选项,单选框则用于多许多选项中选择一个。<div class="row"> <div class="col mt-5"> <form action="#"> <原创 2020-07-30 13:28:34 · 1454 阅读 · 0 评论 -
Bootstrap组件——下拉菜单
下拉菜单一、下拉菜单1.单一按钮的下拉菜单1.btn菜单2.``菜单一、下拉菜单1.单一按钮的下拉菜单1.btn菜单任何一个 .btn块都可以定义变更为下拉菜单。<div> <div class="col-2"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</but原创 2020-07-29 22:53:44 · 1532 阅读 · 0 评论 -
Bootstrap组件——折叠面板
折叠面板一、折叠面板1.基础一、折叠面板Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性。它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为。1.基础 <div class="row mt-5"> <div class="col"> <p> <a href="#kengdie" class="btn btn-primary" data-toggle="colla原创 2020-07-29 20:17:19 · 2398 阅读 · 0 评论 -
Bootstrap组件——轮播
轮播一、轮播1.经典幻灯片效果2.一、轮播1.经典幻灯片效果请注意轮播上的图像引用了 .d-block 、 .w-100两个样式,以修正浏览器预设的图像对齐带来的影响。 <div class="row"> <div class="col"> //slide动起来,carousel-fade渐变显示 <div class="carousel slide carousel-fade" data-ride="carousel"> <div原创 2020-07-29 17:50:23 · 2107 阅读 · 1 评论 -
Bootstrap组件——卡片
卡片一、卡片(card)1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组一、卡片(card)卡片是一个灵活的、可扩展的内容窗口,同时可以做出多种展示效果变体。卡片没有特定的宽度width定义,除非另有定义声明,否则它们的真实宽度将是100%,您可以根据需要使用自定义CSS,引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。1.基础卡片 <div class="row"> <div cla原创 2020-07-29 16:01:39 · 4611 阅读 · 0 评论 -
Bootstrap组件——提示、徽章、面包屑导航、按钮、按钮组
组件一、提示(alert)1.颜色2.链接颜色3.额外附加内容4.关闭警告二、徽章(badge)1.徽章样式的使用2.会继承父元素的一些属性3.在按钮里使用4.胶囊徽章三、面包屑导航(nav)四、按钮(btn)1.正常样式颜色2.其它类型的按钮3.带边框的按钮4.大小不同的按钮5.block类型的按钮6.启用与停用状态的按钮7.切换按钮的active状态8.选项卡的效果五、按钮组(btn-group)1.基本按钮组2.按钮工具栏3.大小规格和尺寸缩放4.嵌套5.垂直排列一、提示(alert)1.颜色警原创 2020-07-29 10:46:17 · 1893 阅读 · 0 评论 -
Bootstrap——其他样式
其他样式一、浮动二、关闭图标三、文本处理1、图像替换2.内容溢出(滚动条)3.文本4.换行和内容溢出处理(省略)5.文字大小写转换6.文字基线对其7.可见性四、定位五、阴影六、尺寸七、间距一、浮动浮动父元素非flex时才能浮动。<div class="float-left">在所有 viewport 窗口上浮动在左侧</div><br><div class="float-right">在所有viewport 窗口上浮动到右侧</div>原创 2020-07-29 09:37:02 · 612 阅读 · 0 评论 -
Bootstrap弹性布局Flex
弹性布局Flex一、Flex1.弹性盒模型2.子元素的排列方向3.子元素的对齐方式4.自对其5.填满6.伸缩7.自动的间距8.wrap包裹9.order排序10.多行对齐一、Flex1.弹性盒模型启用弹性盒模型 <div class="row"> <div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div> <div class="col bg-info text-white原创 2020-07-28 20:29:41 · 1720 阅读 · 0 评论 -
Bootstrap页面内容——边框、颜色、显示、嵌入
Bootstrap一、边框1.添加边2.删除边框3.边框颜色4.边框圆角4.大小二、颜色1.文字颜色2.背景颜色3.背景渐变三、显示Display1.常用显示属性2.none3.设备4.嵌入1.长宽比例处理一、边框1.添加边 <div class="row mt-5 justify-content-around"> <span class="border"></span> <span class="border-top"></span>原创 2020-07-28 15:49:09 · 4784 阅读 · 0 评论 -
Bootstrap页面内容——代码、图片、表格
页面内容一、代码1.内联代码2.代码块3.Var变量4.用户输入(键盘动作提示)5.示例标注一、代码1.内联代码用<code>包裹内联代码片断,勿忘转义HTML尖括号 <code> <h1>这是一个标题</h1> <p>这是一段文字</p> </code>2.代码块使用 <pre>标签可以包裹代码块,同样HTML的尖托号需要原创 2020-07-28 09:05:01 · 1524 阅读 · 0 评论 -
Bootstrap页面内容——排版
Bootstrap一、排版1.全局设置2.标题3.自定义标题备注4.显式标题5.Lead中心内容6.文本内联元素7.Abbr缩略语8.引用与署名9.对齐处理10.无特效列表11.dl表格式水平描述一、排版1.全局设置使用 本地字体堆栈,从而为每一个操作系统或设备上的 font-family渲染都得到最佳的体现(而不是强制多设备共享一套字体呈现标准)。对于更具包容性和可访问的类型规模,我们假设浏览器默认根font-size(通常为16像素),而访客根据自身需要定义浏览器字体大小呈现,并不会影响网页原创 2020-07-27 22:53:59 · 1322 阅读 · 0 评论 -
Bootstrap页面内容——初始化
页面内容一、初始化与CSS重置(Reboot)1.路线方针2.页面默认值3.本地字体属性4.标题和段落5.列表6.pre预先格式化文本7.表格8.Forms表单9.addr内联元素10.概要11.HTML5 的[hidden] 属性一、初始化与CSS重置(Reboot)1.路线方针系统重置建立新的规范化,只允许元素选择器向各个HTML元素提供了自有的风格,额外的样式只通过明确的.class类来规范。例如,我们重置了一系列<table>样式作为简单的基准,然后提供了.table、 .tabl原创 2020-07-27 22:01:12 · 1858 阅读 · 0 评论 -
Bootstrap栅格系统
栅格系统一、运作1.网格选项2.基本结构3.选择自适应类型1.container-fluid3.container二、应用1.设置等宽列,平分宽度2.设置多行等宽列,选择断行3.设置一个列宽,剩下的自动平分4.设置根据内容调整列的宽度5.设置所有尺寸下,都占同样的列数6.混合排列或者组合模式7.对齐1.行的对齐方式2.列的单独对齐方式8.列排序9.列偏移10.间距11.嵌套一、运作1.网格选项即引入样式后,最多可将屏幕分为12栏,可再通过需求合并。2.基本结构首先要布置基本结构和公共的class原创 2020-07-26 17:43:24 · 2497 阅读 · 0 评论 -
Bootstrap初步了解
Bootstrap一、响应式原理1.响应式所具有的特点2.@规则3.媒体查询二、媒体类型1. all所有设备2.print打印机设备3.screen彩色的电脑屏幕4.speech听觉设备三、媒体特性1.width 宽度2.height 高度3.orientation 方向4.aspect-ratio宽度比5.-webkit-device-pixel-ratio 像素比四、逻辑与算符1. and 合并多个媒体查询(并且的意思)2. , 匹配某个媒体查询(或者的意思)3. not 对媒体查询结果取反4.原创 2020-07-26 10:18:53 · 664 阅读 · 0 评论