随笔分类 - BootStrap
摘要：代码比较粗糙但可以用， 直接上代码： 1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <title>网申传媒</title> 5 <meta name="keywords" content="页面关键词"> 6 <meta name=
阅读全文
摘要：【常用】swiper插件下使用container元素，使其自适应 代码如下，已做兼容处理： 效果： 方法二：利用card的card-img-overlay 制作背景图片 card有边框，所以这里要加上 border-0
阅读全文
摘要：当使用 text-justify时，发现无法实现两端对齐，于是又增加了一个补丁样式：
阅读全文
摘要：d-flex功能强大，可以实现响应式布局 flex-grow-1 用于设置子元素使用剩下的空间。 但实际运用中存在兼容问题及无法正常的分配宽度问题，现整理解决方法如下： 无法显示设置的宽度： 现象如图： 解决方法，把flex-grow-1的宽度设置为0px,代码如下： 显示效果如下图： 这种方式也解
阅读全文
摘要：模态框由二类元素组成： 1、触发元素 2、模态框元素 一、定义模态框触发元素(以button为例)： 二、定义模态框元素： 注意： 1) 一定要给模态框加上 tabindex="-1" 属性 2) 默认模态框是四个圆角，给模态框去掉圆形边角，示例：<div class="modal-content
阅读全文
摘要：四边都带有0.25rem的半径，见下图 四边都是直角，见下图： 左上角、左上角都带有0.25rem的半径，见下图： 左上角、右上角都带有0.25rem的半径，见下图： 右上角、右下角都带有0.25rem的半径，见下图： 左下角、右下角都带有0.25rem的半径，见下图： 圆形状态，见下图：
阅读全文
justify-content-{around | between | start | center | end }内容对齐 - bootStrap4常用CSS笔记（2019-05-16 09:38）
摘要：bootStrap4中内容对齐有五种模式： 该样式必须和一个容器对像一起调用，否则无效，比如： 五种对齐样式，见下图： 示例代码：
阅读全文
摘要：属性 常用的功能，可以通过以下属性来设置： 触发弹出框的方式： 1、click 【默认】单击时显示或关闭 2、hover 移上去显示，移出去隐藏 3、focus 单击时显示，点击空白处时隐藏 4、manual 手动模式。需要调用js代码触发显示或关闭弹出框 设置弹出框内容是否支持HTML格式。默认值
阅读全文
摘要：tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 属性 常用的功能，可以通过以下属性来设置： 触发提示框的方式： 1、click 【默认】单击时显示或关闭 2、hover 移上去显示，移出去隐藏 3、focus 单击时显示，点击空白处时隐藏 4、manua
阅读全文
摘要：导航一般采用ul、li来定义，否则有些效果无法实现，比如动态选项卡效果。 基础样式： 导航样式及属性： 导航选项的对齐方式： .justify-content-start 默认，左对齐 .justify-content-center 居中对齐 .justify-content-right 右对齐 动
阅读全文
摘要：导航栏：navbar 导航栏容器可以包含以下几个常用组成： 1、品牌LOGO（.navbar-brand ） 2、导航菜单（.navbar-nav） 3、导航文本（.navbar-text） 4、折叠导航按钮（.navbar-toggle） 5、表单（.form-inline） 一、导航容器一般使用
阅读全文
摘要：宽度百分比样式： 高度百分比样式：
阅读全文
摘要：方法一：受垂直导航的居中对齐启发实现此要求，具体代码如下： 一、图片的垂直（水平）居中 样式说明： a) nav 导航基类 b) 由于要实现垂直居中，所以这里定义一个垂直导航 c) justify-content-center 类用于实现内容区域垂直居中。 d) 图片通过类 m-auto 实现水平居
阅读全文
摘要：【折叠】可以很容易的实现内容的显示与隐藏。 触发元素要设置以下属性： data-toggle = "collapse" data-target = "#id" 或者链接的href代替此属性 href="#id" 触发下拉元素代码示例： 折叠元素设置样式为: collapse，代码示例： 完整代码：
阅读全文
摘要：【margin、padding】 分别采用m与p的简写方式 margin间距样式： 定义四周间距 .m-0 等价于{margin:0 !important} .m-1 等价于{margin:0.25rem !important} .m-2 等价于{margin:0.5rem !important}
阅读全文
摘要：.border 含有边框 .border-{primary | second | dark | light | warning | danger | success | info | white} 边框的颜色 .border-0 四条边都不含边框 .border-{top | right | bot
阅读全文
摘要：【卡片】卡片用于定义一块带圆角的区域。 卡片层次关系：
阅读全文
摘要：【列表: ul/ol/dl】列表默认样式为垂直样式，一个项目占据一行。带灰色圆角边框。 [ol/ul/dl列表示例] 也可以使用链接代替ul/ol/dl，示例:
阅读全文
摘要：【面包屑导航】类似当前位置导航，它会自动在每项后面加上 / 示例： 也可以使用链接样式，示例：
阅读全文