7月
20
bootstrap4 相关
Bootstrap 4重大更新，亮点解读
知乎 Bootstrap4
E文文档
他人学习笔记
https://blog.csdn.net/bbdxf/article/details/79251934
漂亮的主题
https://www.creative-tim.com/product/material-kit
bootstrap4 自定义颜色
默认的按钮，input等颜色比较难看，某些设置也不人性化，这些都是通过编译bootstrap的源码来自己来定义的。主要分以下几个步骤。
- 前期准备。
安装 npm 并使用 淘宝镜像。http://npm.taobao.org/
git 工具
2，下载原文件包。
https://github.com/twbs/bootstrap
在 scss 目录下，就可以看到它的源码。
找到_variables.scss，并修改里边的颜色值，再编译就可以了。比如：
# 有颜色值的是我修改的
$primary: #9c27b0 !default;
$secondary: $gray-600 !default;
$success: #4caf50 !default;
$info: #00bcd4 !default;
$warning: #ff9800 !default;
$danger: #f44336 !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
sudo cnpm run dist
# 编译打包就可以了
# 修改点击按钮的时候，按钮周围的边框，好难看，强迫症要干掉。这样会把input的边框也干掉了，不好。
$input-btn-focus-width: 0 !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: none !default;
5月
24
仅仅看表象，以为是 js 实现的效果，却是 css 实现的。这里有一个例子，利用 radio 的单选特性，实现单选效果。
步骤
- 创建 input标签，邻居创建 span标签。
- 父容器相对定位，input绝对定位，left，top为0，opacity为0。看不见看不见。
- 利用 + ，~ 处理邻居 div。
- 利用 checked 实现变化。
让 input 透明掉，其实就是让你去美化 span，不再需要 radio 那难看的容颜。是不是有点不道德啊。
请看 code：
<div class="box">
<div class="tags-select">
<label class="tag-select">
<input type="radio" name="bye-type" value="1" checked>
<span class="name">官方标配</span>
</label>
<label class="tag-select">
<input type="radio" name="bye-type" value="2">
<span class="name">官方标配 + 蓝牙耳机</span>
</label>
<label class="tag-select">
<input type="radio" name="bye-type" value="3" disabled>
<span class="name">官方标配 + 充电宝</span>
</label>
</div>
</div>
<!-- 利用radio唯一性，实现了不用js也能实现的效果。右边是 scss -->
.tags-select{
font-size: 0;
> .tag-select{
position:relative;
display:inline-block;
font-size: 14px;
margin: 5px;
color: #fff;
.name{
display: block;
line-height: 20px;
padding: 8px 10px;
border-radius: 5px;
background-color: #FE7D91;
cursor:pointer;
}
.name:hover{
background-color: #FE3591;
}
input[type="radio"]{
position:absolute;
z-index: -1;
opacity: 0;
//选中
&:checked +.name{
background-color: #FE3591;
}
//禁用
&:disabled +.name{
background: #eee;
color: #999;
cursor: not-allowed;
}
}
}
}
.box{
display:flex;
width:100%;
height:100px;
justify-content:center;
align-items:center;
}
记得，上边使用了 scss。
效果
https://jsfiddle.net/vini123/ad30qpyb/
5月
24
在传统 div 排版中。padding竟会占用父容器的宽高，这个很影响心情和需要。
比如下边这个布局：
.group{
margin:20px;
}
.item{
display:inline-block;
width:250px;
height:40px;
line-height:40px;
background-color:#FE7D91;
color:#fff;
border-radius:3px;
}
.item label{
float:left;
width:35%;
text-align:right;
font-size:16px;
}
.item label ~div{
float:left;
width:65%;
font-size: 14px;
}
<div class="group">
<div class="item">
<label>神奇</label>
<div>动物在哪里</div>
</div>
</div>
使用 box-sizing，容器宽度都不会被撑开。
还有一种方法，就是使用 flex 布局。
完整的demo：https://jsfiddle.net/vini123/kbecxju7/1/
参考
http://www.w3cplus.com/content/css3-box-sizing
4月
12
3月
19
div使用float时，父容器的高度不能撑开自适应，该怎么处理呢。
有两种方法：
- 在div的后边额外加一个div，并设置样式
clear:both
- 在父容器中，设置样式
overflow:auto;
3月
08
花瓣的内容排版是使用瀑布流的方式排版。实现瀑布流式的排版的插件蛮多的，blocksit 就是一个比较简便的插件。
依赖少，仅仅依靠 jquery。 css也少。用该插件，注意以下几个问题就可以了
- 每次执行 BlocksIt 之前，设置父容器的宽度的时候要正确。
-
图片加载完成后，再 BlocksIt 一次。防止，图片排版错乱。
其实，排版的是图片的父容器。使用的是绝对定位。而为什么总是说图片，就是因为所要展示的中心是图片。围绕图片，可以在图片上放置div，图片下边，等放置div。其结构可以有下边这样的层次构成。
继续阅读
3月
08
在做 banner 切换的时候，swiper插件刚好能用上，效果也非常好。
可以先看下他们的demo：
http://www.swiper.com.cn/demo/index.html
滚动条效果，都做的非常有弹性。有需要的可以去尝试。
3D滚动切换也非常棒。有需要的可以去尝试。
1月
28
textarea 原本是不会自适应高度的。可恨的滚动条也总会出现。想要让textarea自适应高度的，就用 js 吧。
自适应高度
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
textarea 内容改变侦听
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
额外赠送 smplemde
https://github.com/sparksuite/simplemde-markdown-editor
可隐藏bar，可设置最小高度，可侦听变化，可复制粘贴图片。
额外赠送 js markdown->html
https://github.com/chjj/marked
调用 marked 方法即可。
