02-Bootstrap
2018-10-20 本文已影响0人
王梓懿_1fbc
一、自定义bootstrap按钮
将生成对应的样式拷贝到对应样式表中，即可以使用；例如btn-login，使用时为: <a class='btn btn-login' role='button' href='#'></a>
二、字体图标
-
使用普通图片图标问题
- 位图图片不能很好地进行缩放，当图片进行放大时会失真（即变模糊），当图片进行缩小时就会浪费掉像素;
- 加载每一张图片都需要进行网络请求(可以用精灵图解决);
- 图片如果需要修改样式，需要图片编辑器(例如PS)对图片进行编辑、处理等操作;
-
字体图标
图标当成文字来使用时，会有意想不到的效果，它们只是一种形状而已，好处:- 很容易任意地缩放;
- 很容易地改变颜色；
- 很容易地产生阴影；
- 可以拥有透明效果；
- 可以使用CSS来装饰；
- 可以快速转化形态(如 :hover等)；
- 可以做出跟图片一样可以做的事情(改变透明度、旋转度..)；
- 本身体积更小，但携带的信息并没有削减;
- 引入自己的字体
@font-face {
/* 定义字体名称(必须)*/
font-family: 'zyz';
/* 字体文件的 URL(必须)*/
src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff'), url('../fonts/MiFie-Web-Font.svg') format('svg');
/* 定义字体的样,默认是 "normal" (可选)*/
font-weight: normal;
/* 定义字体的粗细。默认是 "normal"(可选)*/
font-style: normal;
}
- 使用字体图标
/* 字体图标类名以icon-开头*/
[class^='icon-'],
[class*=' icon-'] {
font-family: 'zyz' !important;
font-style: normal;
}
/* 设置对应的图标*/
.icon-mobile:before {
content: "\e908";
font-size: 13px;
}
为什么要用":before"形式？
因为直接写HTML时要记住对应的字符编码；而使用CSS时，将对应字符编码写好，需要用时直接用类名即可； (使用比较便捷)
三、谷歌浏览器开发工具
直接在浏览器中修改样式，会更为快捷，但修改的内容和原文件时不同步的，所以就可以通过以下操作，将文件作一个关联：
-
创建文件夹到工作空间
-
选择对应的工程目录(浏览器会提示，选择允许此操作)
-
添加映射(即文件关联)
映射操作只需要做一次，其他文件是会自动对应上。添加完成之后，在浏览器中修改样式，就会同步到本地文件中。
四、轮播图
- 在较小的屏幕下显示一张超宽大图，图片居中方式
- 背景图方式
background-position: center center；
- padding
left: 50%
margin: width/2
background-size: length|percentage|cover|contain;
- length(具体数值)
设置背景图像的高度和宽度;
第一个值设置宽度，第二个值设置高度;
如果只设置一个值，则第二个值会被设置为 "auto";
例如 background-size: 200px 200px；
- percentage(百分比)
以父元素的百分比来设置背景图像的宽度和高度；
第一个值设置宽度，第二个值设置高度；
如果只设置一个值，则第二个值会被设置为 "auto"；
例如 background-size: 100% 100%；
- cover
把背景图像扩展至足够大(以图片最小边为准，拉到和盒子一样)，以使背景图像完全覆盖背景区域；
背景图像的某些部分也许无法显示在背景定位区域中；
例如 background-size: cover；
- contain
把图像扩展至最大尺寸(以图片最大边为准，缩放到和盒子一样)，以使其宽度和高度完全适应内容区域；
例如 background-size: contain；
<div class="item active" data-img-lg='img/slide_01_2000x410.jpg' data-img-xs='img/slide_01_640x340.jpg'></div>
// 获取到自定义属性
$item.data('img-lg');
// 当窗口大小发生改变时触发
$(window).on('resize', function(){ });
// 注册完事件后，如果想要立即触发某个事件，可以通过trigger
$(window).on('resize', resize).trigger('resize');
相同样式的，写到css文件中，如果不同的一般直接是行内样式；
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
