CSS样式之表格，表单

Posted 2020-07-27 黑默

• 布局样式
• .container:固定宽度并具响应式
• .container-fluid自由宽度（100%宽度）
• 标题样式
  • 　　<h1>到<h6> 样式已经写好了，可以直接用，兼容性也做到了。行内元素显示块的样式

• 行内文本样式：

  • <b> <strong> 加粗
  • <i>  <em>斜体
• <s><del>删除线

• 文本对齐样式

• .text-left
• .text-center
• .text-right
• .text-justify:两段对齐

• 列表样式

• .list-unstyled:去掉前面的符号
• .list-inline(行内块　　

• 表格样式

  • .table:这个类样式会有少量空白，以及水平分割线
  • .table-striped:隔行变色
  • .table-bordered:带边框的表格
  • .table-hover:鼠标放上变色效果
  • .table-condensed:表格紧凑型

• 行或单元格背景色

  • .active
  • .success
  • .info
  • .warning
  • .danger

  只能给tr和td加的类样式，一种颜色

• 表格响应式布局

  使用DIV标记内.table-responsive元素将.table元素包围

• 表单样式

  • .form-group ：表单组样式,将<label>和表单元素包含其中
  • .form-control ：给input,select,textarea等元素加样式（复选框不能加这个）
  • Placehoder属性
  • 给input加提示信息，将value改为placeholder
  • .form-inline  :给form加的类，让input行内显示

   

  • .sr-only:给label加，使其文字隐藏。
  • .checkbox:复选框样式
  • .radio：单选框模式//给 input 的name设置同一个name 则可以选中一项
  • .disabled:  禁用单选框或复选项文本
  • .form-horizontal:水平排列的表单，用于FORM元素
  • .checkbox-inline:给多个复选项显示在同一行
  • .radio-inline:控制多个单选框元素在同一行显示。