本文详细介绍了如何利用Bootstrap实现响应式栅格系统，包括CSS媒体查询和JS resize事件的应用。此外，还涉及修改站点图标、内容隐藏显示的工具类、字体图标制作与使用、自定义按钮以及轮播图的实现。同时，文章讲解了如何确保主内容区图片居中和响应式，并介绍了Bootstrap的工具提示功能。
1. bootstrap
1.1. 实现bootstrap的栅格系统在不同屏幕下的响应式!
1.1.1. 利用css媒体查询
1.1.1.1. html代码
<div class="container"></div>
1.1.1.2. css代码
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
height: 50px;
margin: 0 auto;
background-color: aqua;
}
/* 媒体查询 */
@media screen and (max-width: 768px){
.container{
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width:992px){
.container{
width:750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
width: 970px
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
1.1.2. 利用js的resize事件
1.1.2.1. 代码
<div class="container"></div>
<script>
/*实现响应式布局的方式二：利用js的窗口改变事件，resize：当窗口或框架的大小变化时在 window 或框架上面触发*/
window.onload = function(){
let container = document.querySelector(".container");
let clientW = 0;
resize();
function resize(){
//获取窗口宽度
clientW = window.innerWidth;
//判断
if(clientW >= 1200){
container.style.width = "1170px";
} else if (clientW < 1200 && clientW >= 992){
container.style.width = "970px";
} else if (clientW < 992 && clientW >= 768){
container.style.width = "750px";
} else {
container.style.width = "100%";
}
}
window.addEventListener("resize",resize)
}
</script>
1.2. 修改站点图标
- 如果没有现成的ico格式的站点图标，可以将合适的其他格式的图片转换成ico格式，百度一下在线生成ico即可
2.在head标签里加入一条link标签，href的值为存放图标的地址
<link rel="shortcut icon" href="imgs/lk_favicon.ico" type="image/x-icon">
1.3. 针对内容显示或隐藏的工具类
想控制内容隐藏或显示就给元素加上这些类，例如想让屏幕在<768px时隐藏某个元素
<div class="hidden-xs hidden-sm"></div>
1.4. 字体图标
优点：放大缩小不失真
1.4.1. 制作字体图标
- 上网下载需要的图标（svg格式），可以去阿里巴巴图标库
- 打开iconmoon网站，点开右上角的iconmoon APP，如果已经有svg图标文件点击左上角的import icons 传入图标后转换成字体图标，如果没有文件可以选择界面上的图标，默认未选中状态背景为灰色，选中后背景为白色，选择完需要的图标后，点击右下方的generate font，在打开的界面上再点击右下方的download，将转换好的文件下载下来，将下载下来的文件解压，文件夹中有个style.css演示了使用方法
1.4.2. 使用字体图标
- 将解压后的文件夹中的fonts文件夹放到项目中，参照解压后的文件夹中的style.css文件进行使用
- 将以下内容写入自定义的css文件中，注意以下内容
- src中的url写入字体文件的相对路径，即fonts文件夹下的字体文件
- ormat中写入字体文件对应的类型，
- 后缀为eot对应embedded-opentype，
- 后缀为ttf对应truetype。
- 后缀为woff对应woff，
- 后缀为svg对应svg
- [class^=“icon-”], [class*=" icon-"]匹配所有以icon-开头的类
- 给元素添加相应的类名，在css文件中给该类添加伪元素，并让这个伪元素的content为字体图标的Unicode码
@font-face {
/* 下面的URL中，f*/
font-family: '字体名';
src: url('fonts/icomoon.eot?hup8c0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hup8c0') format('truetype'),
url('fonts/icomoon.woff?hup8c0') format('woff'),
url('fonts/icomoon.svg?hup8c0#icomoon') format('svg');
<!-- 可选
font-weight: normal;
font-style: normal;
font-display: block;
-->
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
<!-- 可选项
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-->
/* Better Font Rendering =========== 可选*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
content: "\e902";
}
.icon-file-text:before {
content: "\e922";
}
1.5. 定制按钮
1.5.1. 颜色
可以使用BBG按钮插件,将类名、文本颜色、背景颜色、边框颜色、悬停时显示背景颜色填入后自动生成bootstrap的css代码，复制粘贴到自己的css里即可
1.5.2. 尺寸
可以查看bootstrap文档中的按钮部分，bootstrap文档按钮相关
轮播图
boostrap文档
1.在文档的JavaScript插件处，找到Carousel，示例效果如图
图片会自动切换,点击左右箭头可以切换图片，点击下方小圆点也可以切换图片，文档结构如下，需注意
- 如果大div的值改变，下方的对应值也要改变，在此例中，如果第一个div的id改为mycarousel,那么
- 控制切换图片的小圆点的li标签中的data-target的值也要相应改变为data-target="#mycarousel"，下例中三个li都要改
- 控制切换图片的左右箭头的a标签中的href的值也要改为href=“mycarousel”
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 指示器，即下方的小圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 主内容区，即切换的图片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<!-- ...可以增加或减少要显示的内容 -->
</div>
<!-- 控制器，即左右两个箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
实现主内容区图片始终居中和响应式
原理
- 每张图片准备两个不同大小的，大图作为div的背景，注意css要设置该div的background-size为cover，background为no-repeat center center，小图则使用div里面的img标签，当屏幕缩小至一定大小时，显示小图，否则使用大图
- 补充知识：jQuery中的data()在元素上存放数据,返回jQuery对象。
<body>
<div data-name="周杰伦" data-age="18"></div>
<button id="btn">获取数据</button>
<button id="btn1">设置数据</button>
<script src="../college/lib/jquery/jquery.js"></script>
<script>
$(function () {
// 获取数据
$("#btn").on("click", function () {
console.log($("div").data("name"));//周杰伦
console.log($("div").data("age"));//18
});
// 设置数据
$("#btn1").on("click", function () {
$('div').data("name", "fg");
$('div').data("age", "40");
});
});
</script>
</body>
实现
- HTML代码
<!-- 中间滚动的内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-sm-img="imgs/slide_01_640x340.jpg" data-lg-img="imgs/slide_01_2000x410.jpg">
</div>
<div class="item" data-sm-img="imgs/slide_02_640x340.jpg" data-lg-img="imgs/slide_02_2000x410.jpg">
</div>
<div class="item" data-sm-img="imgs/slide_03_640x340.jpg" data-lg-img="imgs/slide_03_2000x410.jpg">
</div>
</div>
- css代码
#lk_carousel .item{
background: no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
}
@media screen and ( min-width: 800px){
#lk_carousel .item{
height: 410px;
}
}
- js代码
$(function(){
$(window).on("resize",function(){
//获取窗口宽度
let clientX = $(window).width();
//设置临界值，用以区分显示大图片或小图片
let isShowBig = clientX > 800 ;
//获取所有需要设置的元素
let $allItem = $("#lk-carousel .item");
// 遍历item，添加属性
$allItem.each(function(index,item){
//取出src
let src = isShowBig ? $(item).data("lg-img"):$(item).data("sm-img");
let bgurl = "url('"+src+"')";
//设置背景
$(item).css({
backgroundImage:bgurl
})
//设置小图
if(!isShowBig){
let $img = "<img src='"+src+"'>";
$(item).empty().append($img);
} else {
$(item).empty();
}
})
});
$(window).trigger("resize");
});
工具提示
在API文档中的工具提示，可以实现鼠标悬停时显示提示框
使用方法
- 在js文件中加入如下语句
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
- 在需要实现效果的元素标签上写入以下属性，其中
- data-placement控制显示的方向
- title控制显示的内容
- 其他请查文档
data-toggle="tooltip" data-placement="left" title="Tooltip on left"
});
工具提示
在API文档中的工具提示，可以实现鼠标悬停时显示提示框
使用方法
- 在js文件中加入如下语句
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
- 在需要实现效果的元素标签上写入以下属性，其中
- data-placement控制显示的方向
- title控制显示的内容
- 其他请查文档
data-toggle="tooltip" data-placement="left" title="Tooltip on left"
扫一扫
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
