19 篇
Bootstrap4
| 213

web

bootstrap4导航无法点击菜单链接问题

解决bootstrap导航无法点击一级菜单链接问题的方法很简单,只需要在网站的底部加上下面的JS代码即可。 <script> $(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); }); </script> ...
Bootstrap4 | 2020-06-30
0   0  0
| 240

taotaoit

Bootstrap4中利用弹性布局实现一侧宽度固定,一侧宽度自适应

flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis...
Bootstrap4 | 2020-06-19
0   0  0
| 262

web

bootstrap4中container和container-fluid的区别

栅格系统提供了集中内容居中、水平填充网页内容的方法,使用.container应答网页宽度, 或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。 换一个说法就是:.container实现固定的宽度并居中呈现,.container-fluid实现全宽度。 .container-...
Bootstrap4 | 2020-06-04
0   1  0
| 1656

web

Bootstrap4中popper.min.js的作用

popper.min.js 用于设置弹窗、提示、下拉菜单,是第三方插件,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script s...
Bootstrap4 | 2020-05-27
0   6  1
| 275

web

瀑布流插件Masonry与Bootstrap4结合

你可以使用Bootstarp的栅格系统来控制瀑布流布局。(官方是Bootstrap3,这里改为Bootstrap4,没什么大区别) 下面的例子使用col-4作为columnWidth来实现3列布局 示例展示>> 使用Bootstrap网格媒体查询多个.col-类在组件上,实现响应式布局 下面的例子...
Bootstrap4 | 2020-05-21
0   0  0
| 533

taotaoit

Bootstrap4超出文本显示省略号

对于更长的内容,你可以添加一个 .text-truncate class样式,以省略号截断文本(需要结合 display: inline-block 或 display: block来使用)。 <!-- Block level --> <div class="row"> <div class="c...
Bootstrap4 | 2020-05-07
0   0  0
| 255

taotaoit

Bootstrap4中dl dt dd排版dd下面多一点空白

Bootstrap4中,dt、dd水平排列的时候,dd下面会多出一块空白,导致如果两个dl上下排列的话,dl之间的距离不是1rem 原因是Bootstrap4中,dd定义了样式 dd { margin-bottom: .5rem; margin-left: 0; } 要给dd加.mb-0清除底部边距,或者手写css清...
Bootstrap4 | 2020-04-22
0   0  0
| 334

web

Bootstrap4 css中的:root 是什么意思?

定义的颜色部分是相同的 --blue: #007bff;和--primary: #007bff;<br> --red: #dc3545;和--danger: #dc3545;<br> --yellow: #ffc107;和--warning: #ffc107;<br> --green: #...
Bootstrap4 | 2020-04-21
0   0  0
| 258

web

Bootstrap4中怎样实现1行5列

Bootstrap3中实现1行5列,需要自定义css样式,文章链接:http://taotaoit.com/article/details/904.html Bootstrap4中,就不需要这么麻烦了。 使用 .row-cols-* 类能够定义一个row空间中可放的列数,并支持不同的断点如.col-*、 .col-md-4...
Bootstrap4 | 2020-04-20
0   0  0
| 264

web

bootstrap4 输入框选中状态阴影如何去除

原标题:去掉bootstrap4自带的input输入框半透明阴影 bootstrap 输入框等输入时会自带蓝色阴影效果,有时候我们并不需要。 button同理 查看bootstrap.css代码,搜索focus,找到相关内容。 所以我们再写css,把它原来的覆盖掉就可以啦 /*去掉bootstrap自带的in...
Bootstrap4 | 2020-04-18
0   0  0
| 190

taotaoit

Bootstrap4,:after,display: flex;

不知道这算什么问题,权当记录一下。 抄了别人一段代码,效果不一样,背景图片不显示,经比对发现是Bootstrap4的.row里面多了display: flex;的问题。 原代码: <style> .index-top-bg{position:relative;overflow:hidden;} .index...
Bootstrap4 | 2020-04-16
0   1  0
| 231

taotaoit

Bootstrap4滚动监听实例

如果需要实现居顶部一定距离的时候,就开始滚动,可以用data-offset=“”实现,默认值10,描述:计算滚动位置时,从顶部开始的计算的像偏移距离。 举例: <body style='position: relative; padding-bottom:500px;' data-spy="scroll" data-t...
Bootstrap4 | 2020-04-09
0   0  0
| 377

web

bootstrap4中使用Font Awesome图标

bootstrap4中默认取消了Font Awesome图标的应用,所以如果要使用相关图标就需要我们自己手动添加,具体步骤如下: 1.下载Font Awesome 下载地址https://fontawesome.com/download 图标样式展示:https://www.bootcss.com/p/font-awesome/...
Bootstrap4 | 2019-12-12
0   0  0
| 290

web

bootstrap4基础页面

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https:/...
Bootstrap4 | 2019-11-26
0   0  0
| 407

web

bootstrap4鼠标经过触发下拉菜单

很简单,css中加入如下代码 .dropdown:hover>.dropdown-menu { display: block; } .dropdown>.dropdown-toggle:active { pointer-events: none; } 修改完成后发现一个小问题,菜单和文字间有一点空隙,鼠标...
Bootstrap4 | 2019-11-26
0   0  0
加载更多