（imooc）bootstrap快速入门1

什么是bootstrap

              基于HTML,CSS,JavaScript的前端框架

               前端工具包（web快速开发）

               响应式布局

               移动设备优先

学习Bootstrap

• bootstrap 全局样式用法
• viewport意义
• 栅格化布局用法
• 字体，图标
• 组件

            实现响应式布局的开发

实现：

工具：任意前端均可（专用Jerstrap  ）

0.Bootstrap开发环境:  http://getbootstrap.com        www.bootcss.com

1.Bootstrap中的js插件依赖于JQuery,因此JQuery要在Bootstrap之前引用

   下载Jquery 文件添加到js文件夹： http://jquery.com/download/

2.使用HBuilder时导入Bootstrap

一、全局样式

           基本的html元素均可通过class设置增强效果

           排版   表格   表单   图片    （调用定义好的类名）

标题：

• 标题（h1, h2, h3, h4, h5, h6) class 名为h1-h6

                      36,  30,  24, 18,  14,  12     -----px

• 副标题(small)

文本：

• 段落：p标签 （默认:14px，行高：20px, 底部外边距:10px）
• 对齐方式 ①.text-left

              （class名）②.text-center

                                 ③.text-right

• 大小写 ①.text-lowercase 变小写

                                 ②.text-uppercase    变大写

③.text-capitalize 首字母大写

• 文本标记 <mark></mark> 标记

                                   <del></del>       文字上加删除线

                                   <ins></ins>（<u></u>）    插入文本 （下划线）

                                    <small></small>   变小

                                  <strong></strong>   着重加粗

表格：

• 带边框表格 .table-bordered

                条纹状表格   .table-striped

                悬停变色      .table-hover

                紧凑风格      .table-condensed

表单

• form-control ---- 表单元素（input,select,textarea...)）表单元素变漂亮（圆角，鼠标点击闪光）
• form-group ---- （div）组件的概念（一个整体）

                                          has-error,has-warning,has-success   设置组建颜色（依次为红，黄，绿）

• form-inline ---- (form) 所有表单元素水平布局
• control-label ---- (label)

按钮

• btn 使按钮变漂亮（圆角，柔和）
• active

               disabled="disabled"    禁用（无法点击按钮)

• btn-block 全屏显示按钮（适用于手机等客户端）
• btn-link 链接
• 可以设置a标签的按钮效果

图片（形状）

         圆角  .img-rounded

         圆形   .img-circle

         带有边框的圆角图形     .img-thumbnail

辅助类

        （文本颜色  背景颜色  状态设置  三角符号）

二、响应式布局

viewport

meta 标签中的viewport(写手机端会用，调节视窗)

1. 初始宽度高度 width,height
2. 是否允许用户放大缩小 user-scalable,initial-scale
3. 放大缩小多少倍 maximum-scale,minimun-scale

                         手机与pc 端基本一致

  一个像素里有多个像素点

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"  />

响应式网页

视野开阔，信息丰富。排版随意新颖。适用于pc端和手机端。

根据屏幕大小显示排版不同

栅格

******为什么col-lg-*,con-md-*,con-sm-*,con-xs-*都不起作用？？？

单位

       px:相对于屏幕分辨率的单位，无法跟随屏幕放大缩小（所有浏览器均支持）

       em:会继承 父元素字体大小。手机端开发

              1em=16px(大概)   

       rem:会继承 根元素字体大小。比rem稳定，几乎所有浏览器支持

               html{font-size:62.5%}  ∴1rem=10px(大概)