Bootstrap3按钮默认样式解析.docxVIP

Bootstrap3 按钮默认样式解析 Bootstrap 是一个火速流行的一个 js 框架，它类似于 jQueryUI，但它有自己的一套结合紧密的风格与插件，值得学习和研究。 下面是 Bootstrap 按钮的默认样式与实现，它的效果图为： !doctype html !doctype html html head meta charset=utf-8 titleBootstrap3 按钮默认样式解析/title style type=text/css a { color: #428BCA; /* 取消超链接的默认下划线*/ text-decoration : none; } .btn { /* 显示为行级块*/ display: inline-block; /* 检索或设置对象四边的内部边距 */ padding: 6px 12px; /* 设置底部外边距 */ margin-bottom: 0; font-size: 14px; /* 设置或检索对象中的文本字体的粗细，取值有normal/bold/bolder/lighter */ font-weight: normal; /* 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离 */ line-height: 1.428571429; /* 文本对齐方式 */ text-align: center; /* 空格的处理方式，强制在同一行内显示所有文本，合并文本间的多余空白 */ white-space: nowrap; /* 垂直对齐方式 */ vertical-align: middle; /* 鼠标移动到对象上的显示方式 */ cursor: pointer; /* 设置边框，三个值为宽度、线条样式、颜色，transparent 是全透明黑色(black)的速记法 */ border: 1px solid transparent; /* 边框圆角 */ border-radius: 4px; /* 以下为用户是否可选择内部文本，不同浏览器作了自己的实现 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .btn:focus { /* 三个属性依次为宽度、样式、颜色。outline 设置或检索对象外的线条轮廓，它是画在 border 外面 */ outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; /* 0 是以 border 边界作为参考点的，正值从border 边界往外延，负值从border 边界往里缩 */ outline-offset: -2px; } .btn:hover, .btn:focus { color: #333333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* 对象阴影 */ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .btn-primary { color: #ffffff; background-color: #428bca; border-color: #357ebd; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #ffffff; background-color: #3276b1; border-color: #285e8e; border-color: #285e8e; } .btn-primary:active, .btn-primary.active { background-image: none; } .btn-lg { border-radius: 6px 6px6px6px; font-size: 18px; line-height: 1.33; padding: 10px 16px; } /style /head body pa class= btn-primary btnbtn-lgLearn more raquo;/a/p /body /html