![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap
mintsolace
这个作者很懒,什么都没留下…
展开
-
Bootstrap笔记2
栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin用于生成更具语义的布局。简介:栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。工作原理:(1)“行(row)”必须包含在.cont...原创 2019-08-18 21:35:16 · 111 阅读 · 0 评论 -
Bootstrap笔记4
图片响应式目的:各种终端都需要正常显示图片移动端应该使用更小(体积)的图片实现方式将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm=“小图路径”,data-img-lg=“大图路径”)通过JS的方式获取屏幕宽度判断屏幕宽度是否小于一定的值(如:768)根据判断情况决定使用具体的大图还是小图//获取屏幕宽度var windowWidth=$(wi...原创 2019-08-24 10:27:47 · 142 阅读 · 0 评论 -
Bootstrap笔记1
开始使用Bootstrap下载安装:在HTML中引入相应的CSS和JS文件注意:Bootstrap的JS组件依赖于jQueryBootstrap文档:http://v3.bootcss.com/ 中文网视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;视口的...原创 2019-08-15 23:13:26 · 90 阅读 · 0 评论 -
Bootstrap笔记3
基本的轮播图实现<!--以下容器就是整个轮播图组件的整体,注意该盒子必须加上class="carousel slide" data-ride="carousel"表示当前是一个轮播图bootstrap.js会自动为当前元素添加图片轮播特效--><div id="轮播图的id" class="carousel slide" data-ride="carousel">...原创 2019-08-22 22:16:07 · 328 阅读 · 1 评论 -
Bootstrap——将菜单改为鼠标滑过(bootstrap-dropdown-hover插件)
官网:bootstrap-hover-dropdown人生有限公司<ul class="nav navbar-nav navbar-right"><!-- 按钮1 --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" d...原创 2019-09-20 22:09:40 · 1211 阅读 · 0 评论