Bootstrap简介、模板、CSS样式、表单样式

Bootstrap简介

  • 什么是Bootstrap?

由两个设计师开发,主要用于前端方向(HTML、CSS、JS、PHP)

解决IE低版本不支持HTML5元素:

根据自己的存放路径修改。

  • 为什么使用Bootstrap?
  1. 入门简单,只要有HTML、CSS、JS基础就可以学习
  2. 响应式的布局
  3. 移动设备优先

中文网址:http://v3.bootcss.com/

  • Bootstrap环境安装

Bootstrap下载:

Bootstrap简介、模板、CSS样式、表单样式_第1张图片

要使用Bootstrap,必须要加载jquery(JS文件中)

Bootstrap基本模板

  • HTML5文档类型定义

Bootstrap文档是基于HTML5的,因此,要使用HTML5的文档类型定义(DTD)

  • 字符集设置(防止文字显示为乱码)

  • 移动设备优先

  • 引入CSS和JS文件

用相对路径引入

 CSS全局样式 

  • 布局容器类样式
  1. .container:固定宽度并且具有响应式
  2. .container-fluid:自由宽度(100%宽度)
  • 标题样式

    ,.h1~.h6
  1. ——

    样式重写了,基本上做到了兼容性

  • 行内文本样式
  1. :加粗
  2. :加粗(HTML5支持)
  3. :斜体
  4. :斜体(HTML5新标记)
  5. :删除线(HTML5新标记)
  6. :删除线
  • 文本对齐样式
  1. .text-left:文本做对齐
  2. .text-center:居中对齐
  3. .text-right:右对齐
  4. .text-justify:两端对齐

  • 列表样式
  1. .list-unstyled(无符号):去掉前面的符号
  2. .list-inline:行内块

Bootstrap简介、模板、CSS样式、表单样式_第2张图片

Bootstrap简介、模板、CSS样式、表单样式_第3张图片

  • 表格样式

.table:表格全局样式(少量padding和水平方向的分割线)

Bootstrap简介、模板、CSS样式、表单样式_第4张图片

Bootstrap简介、模板、CSS样式、表单样式_第5张图片

 

.table-striped:有条纹的背景色行(隔行变色)

Bootstrap简介、模板、CSS样式、表单样式_第6张图片

Bootstrap简介、模板、CSS样式、表单样式_第7张图片

.table-bordered:带边框的表格

Bootstrap简介、模板、CSS样式、表单样式_第8张图片

Bootstrap简介、模板、CSS样式、表单样式_第9张图片

.table-hover:鼠标悬停效果(指向时变色,离开恢复)

Bootstrap简介、模板、CSS样式、表单样式_第10张图片

.table-condensed:紧凑的表格(单元格内部会减半,文字与边缘的间距减少)

  • 行或单元格加背景色

.active:当前样式

Bootstrap简介、模板、CSS样式、表单样式_第11张图片

.success

.info:

Bootstrap简介、模板、CSS样式、表单样式_第12张图片

.warning

.danger

Bootstrap简介、模板、CSS样式、表单样式_第13张图片

注:只能给或添加类样式

响应式表格:将.table元素包裹在.table-responsive元素内,即可创建响应式表格

屏幕宽度小于768px时,表格将会出现滚动条,反之屏幕条消失

Bootstrap简介、模板、CSS样式、表单样式_第14张图片

  • 表单样式
  1. .form-group表单组样式:将
  2. .form-control表单元素样式:常用于添加提示信息,是HTML5新增属性
  3. .form-inline内联表单样式:用于form元素,可以使元素一行排列
  4. .sr-only:隐藏元素
  5. .radio-inline:控制多个单选框在同一行显示
  6. .checkbox:复选框样式
  7. .checkbox-inline:控制多个复选框在同一行显示
  8. .disable:可以禁用单选框或复选框的文本

Bootstrap简介、模板、CSS样式、表单样式_第15张图片Bootstrap简介、模板、CSS样式、表单样式_第16张图片

Bootstrap简介、模板、CSS样式、表单样式_第17张图片

运行结果如下(与value不同):

Bootstrap简介、模板、CSS样式、表单样式_第18张图片Bootstrap简介、模板、CSS样式、表单样式_第19张图片

Bootstrap简介、模板、CSS样式、表单样式_第20张图片Bootstrap简介、模板、CSS样式、表单样式_第21张图片

Bootstrap简介、模板、CSS样式、表单样式_第22张图片

 

 

 

你可能感兴趣的:(Bootstrap)