表单元素(按钮)
<button class="btn" type="button">我是一个基本按钮</button>
既然是button为什么还需要type=button呢 感觉怪怪的 还有通过属性选择器的话 权重和类选择器哪个大?
<button> Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。也可以使用<span><div>等标签创建按钮,但是不建议。
按钮不同的风格
<button class="btn" type="button">我是一个基本按钮</button>
既然是button为什么还需要type=button呢 感觉怪怪的 还有通过属性选择器的话 权重和类选择器哪个大?
<button> Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。也可以使用<span><div>等标签创建按钮,但是不建议。
按钮不同的风格
按钮大小
有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%),特别是在移动端的制作中。Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。
按钮状态——活动状态
主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种
按钮状态——禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性 <button class="btnbtn-primary " type="button" disabled="disabled">
方法2:在元素标签中添加类名“disabled” <button class="btnbtn-primary btn-block disabled" type="button">
两者区别:
对于<a>标签“.disabled”样式不会禁止按钮的默认行为,比如说链接等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。