[Bootstrap]全局样式（四）

按钮

1、基本类.btn

{display/padding/margin-bottom/font-size/border-radius/border}

作用于< a:role:button > <button> <input:button> <input:submit>

2、预定义样式.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link {color/background-color/border-color}

3、尺寸 .btn-lg .btn-md .btn-sm .btn-xs {padding/font-size/line-height/border-radius} .btn-block {display/width}

4、激活状态 .active {background-color/border-color/box-shadow}

5、禁用状态 disabled属性/.disabled {cursor/opcity}

图片

1、响应式 .img-responsive {max-width/height/display}

2、居中 .center-block {display/margin-left/margin-right}

3、形状 .img-rounded .img-circle {border-radius} .img-thumbnail {display/padding/background/border/border-radius}

时间： 2024-10-14 09:08:56

[Bootstrap]全局样式（四）的相关文章

bootstrap 全局样式设置

HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>全局样式</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/boo

[Bootstrap]全局样式（二）

具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size margin-top margin-bottom h1 36px 20px 10px h2 30px 2

表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} 2.条纹表格 .table-striped {nth-of-type(odd):background-color} 3.边框表格 .table-border {border} 4.鼠标悬停 .table-hover {background-color} 5.紧缩的表格 .table-condesed 6.状态类 .active .success .wa

bootstrap 全局样式

reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, ca

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

bootstrap复习：全局样式

一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 二.布局容器 1.Bootstrap 需要为

Bootstrap全局CSS样式之按钮和图片

.btn-default--按钮的默认样式: .btn-primary--按钮的首选样式: .btn-success--按钮的成功样式: .btn-info--按钮的一般信息样式:' .btn-warning--按钮的警告样式: .btn-danger--按钮的危险样式: .btn-link--按钮的链接样式: .btn-lg--大按钮样式: .btn-sm--小按钮样式: .btn-xs--超小按钮样式: .btn-block--将按钮设置为充满父元素: .active--设置按钮为激活状态:

Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. .small--当前元素字体大小的 85%,常用作副标题时,也可用<small>来代替: .lead--让段落突出显示; .text-left..text-center..text-right--将文字于左.居中.于右对齐: .text-lowercase..text-uppercase..text

Bootstrap全局CSS样式之栅格系统

.col-xs-*--栅格列,适用于手机(<768px); .col-sm-*--栅格列,适用于平板(≥768px); .col-md-*--栅格列,适用于桌面显示器 (≥992px): .col-lg-*--栅格列,适用于大桌面显示器(≥1200px): .col-md-offset-*--向右偏移列: .col-md-push-*..col-md-pull-*--改变列的排序: <!DOCTYPE html> <html lang="en"> <