bootstrap学习

2016-01-10

bootstrap 的简介

bootstrap 是一个快速开发web 应用程序和网站的前端框架，是基于HTML CSS Javascript的。

为什么用bootstrap？

1 移动端设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2 浏览器支持 ：所有的主流浏览器都支持bootstrap
3 响应式设计： bootstrap的响应式css能够自适应台式机，平板电脑和手机。

环境安装及配置

引入以下五个,为基本模板

//      引入boothstrap的核心css部分
 1<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<!--htnl5shiv是标签兼容 兼容IE8一下-->
<script src="lib/html5shiv/html5shiv.min.js"></script>
<!--引入respond的媒体查询的兼容性问题-->
<script src="lib/respond/respond.min.js"></script>
<!--引入jquery-->
<script src="lib/jquery/jquery.min.js"></script>
<!--引入bootstrap-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

排版部分

   一： 标题部分
 1.1 h1~h6 

 1.2 主标题下面有副标题的情况  用small
  例： <h1>我是主标题 <small>我是付标题</small></h1>

 1.3  段落部分（正文部分） p

 1.4  强调内容  lead 其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
  例：<p class="lead">我是强调的段落</p>

 1.5 <b>和<strong>标签让文本直接加粗。

 1.6 <em>或<i>来实现斜体

 1.7 强调相关的类
   .text-muted：提示，使用浅灰色（#999）
   .text-primary：主要，使用蓝色（#428bca）
   .text-success：成功，使用浅绿色(#3c763d)
   .text-info：通知信息，使用浅蓝色（#31708f）
   .text-warning：警告，使用黄色（#8a6d3b）
   .text-danger：危险，使用褐色（#a94442）

  1.8 文本对齐风格
     .text-left：左对齐
     .text-center：居中对齐
     .text-right：右对齐
.text-justify：两端对齐

   1.9 列表
    通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

   1.10 表格行
    .active    表示当前活动的信息
    .success    表示成功或者正确的行为
    .info    表示中立的信息或行为
    .warning    表示警告，需要特别注意
    .danger    表示危险或者可能是错误的行为

表单部分

 表单主要功能用来与用户做交流的一个网页控件，主要包括：文本输入框，下拉选择框，单选按钮，文本域和按钮。
1.1水平表单
    在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
 1、在<form>元素是使用类名“form-horizontal”。
 在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
 1、设置表单控件padding和margin值。
 2、改变“form-group”的表现形式，类似于网格系统的“row”。
 2、配合Bootstrap框架的网格系统。

1.2 内联表单
    你只需要在<form>元素中添加类名“form-inline”即可。

1.3 表单控件 (文本域textarea）
 因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

 1.4 表单控件（按钮）
 在Bootstrap框架中的按钮都是采用<button>来实现。
 1 按钮大小 .btn-lg 变大  .btn.sm 变小  .btn.xs 超小 

 1.5 表单控件大小 
 1、input-sm:让控件比正常大小更小
 2、input-lg:让控件比正常大小更大

 1.6 复选框checkbox 和单选按钮 radio
     1 如果checkbox 需要水平排列，只需在label 标签添加类名 checkbox-inline
     2 如果radio 炫耀水平排列，在label 标签上添加类名 radio-inline
 1.7 表单控件 (输入框 input)

 1.8 表单控件 （下拉选择框select）

 1.9 表单控件状态
 焦点状态是通过伪类 focus 来实现的

 1.10 表单的控件（禁用状态：disabled)

 1.11 表单的验证状态
 1 .has-warning :警告状态（黄色）
 2 .has-error: 错误状态（红色）
 3 .hsa-success :成功状态 （绿色）

 1.12表单提示信息  help-block

 1.13 按钮激活状态  
    点击状态 :active  
   焦点状态：focus

 1.14 图像
 1 img-responsive 响应式图片，主要对于响应式设计
 2 img-rounded 圆角图片
 3 img-circle 圆形图片
 4 img-thumbnail 缩略图
 使用方法，在img 标签添加对应的类名