1. 用bootstrap中分列格式要记得加<div class="row">
写代码写到后面,情不自禁给row改名了,想着这命名怎么这么不规范,改成了item-row
,结果就显示有问题了
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10"></div>
</div>
2. 在html里面用vue绑定数据,记得属性要跟后台名字对应
这个item.checkRes
的 checkRes
就是要跟后台对应。
同时v-model
是双向绑定的,常用于input,可以制作选择按钮。
<input class="check" type="radio" value="true" v-model="item.checkRes">True</input>
3. ajax的回调函数里如果用到了this,要在函数外面绑定.bind(this)
$.ajax({
success: function(){
this.list = data;
}.bind(this)
})
4. 美化button的时候 可以直接更改button的样式
本来想用div做button,小哥哥说最好用Button,这样直接看就知道这是个button。
bootstrap自带的button,然后将button显示为block,当时想让button与父元素一样宽,要设置width: 100%
。
不能用margin: 0 auto
,因为 button会很小,周围margin的地方无法点击。
如果用圆角处理边框会比较好看~
// button与父元素一样宽,并且文字居中
button {
width: 100%;
display:block;
text-align: center;
}
// 圆角边框
button {
border-radius: 4px;
}
<button class="btn" v-on:click="sendEditData">提交</button>
5. 想让显示内容居中, 两侧可以设置百分比的Margin
最近比较流行居中显示内容啦,而且内容最好比较窄,适宜阅读。由于想要比较好的自适应效果,就需要我们两侧设置%的margin.
.pages-content {
margin-left: 20%;
margin-right: 20%;
}
<div class="pages-content"></div>
6. 在显示多条数据的时候,且需要交互的时候,让用户集中于当前数据条,加悬浮改变背景色,可以把hover
加到div
上
.item:hover, .item:focus {
// 这个颜色好看~~
background-color: #f5f5f5;
}
<div class="item"></div>