新鲜出炉（bootstrap教程菜鸟教程）bootstrap教程 pdf，Bootstrap教程：适用于手机端块状按钮btn-block，Bootstrap教程：适用于手机端块状按钮btn-block，
从前面几节的内容中，大家可能发现了，每个示例中的按钮宽度都是依靠按钮文本和padding的值来决定。但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。常用与手机端。非常的方便实用！
bootstrap.css文件中源代码：
.btn-block{display: block;width:100%;padding-right:0;padding-left:0;}.btn-block+.btn-block{margin-top:5px;}input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block{width:100%;}
使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><title>块状按钮</title><linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><buttonclass="btn btn-primary btn-lg"type="button">大型按钮.btn-lg</button><buttonclass="btn btn-primary"type="button">正常按钮</button><buttonclass="btn btn-primary btn-sm"type="button">小型按钮.btn-sm</button><buttonclass="btn btn-primary btn-xs"type="button">超小型按钮.btn-xs</button></body></html>
(window.slotbydup = window.slotbydup || []).push({
id: "u6835052",
container: "_96bek913mdb",
async: true
});
本文链接：http://blog.sauo.top/?id=493 感谢分享!
