[Bootstrap]全局样式（三）

表格

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  .warning  .danger  .info

7、响应式表格  .table-responsive

表单

1、使用label和控件组合使用，包裹在.from-group里面获得最好的排列  {margin-bottom}

2、<input>、<select>、<textarea>加类.form-control  {width/padding/border-radius/border}

3、内联表单  .form-inline

4、水平排列  .form-horizontal+栅格类+.control-label

5、输入框  input:text  几乎浏览器自带样式

6、文本域  input:textarea  几乎浏览器自带样式

7、单选和多选 div+.radio/.radio-inline/.checkkbox/.checkbox-inline+属性disabled/.disabled

8、内联单选和多选  .radio-inline／.checkbox-inline

9、下拉列表  几乎浏览器自带样式

10、静态控件  .form-control-staitic+p

11、禁用状态  disable属性  {cursor/background-color}

12、<filedset>   disable属性  禁用包含的所有控件

13、只读状态  readonly属性  {background-color}

14、校验状态  .has-success  .has-warning  .has-error

15、校验状态＋图标  .has-feedback+feedback icon

16、 水平排列／内联＋校验＋图标  .form-horizontal/.form-inline+校验类+.has-feedback+feedback icon

17、控件尺寸  .input-lg  {height/padding/border-radius/font-size}

18、水平排列控件尺寸  .form-group-lg/.form-group-sm

19、列尺寸  栅格类.row+.col-**-*控制尺寸

时间： 2024-10-03 21:34:12

[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

[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-

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入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素

bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应

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--设置按钮为激活状态: