bootStrap学习心得

一、BootStrap介绍:

 

1. BootStrap特点:

  1)跨设备、跨浏览器

  可以兼容所有现代浏览器,包括比较诟病的IE7IE8.

  2)响应式布局

  不但可以支持PC端的各种分辨率的显示,还支持移动端PAD、手机等屏幕的响应式切换显示。

  3)提供全面的组件

  BootStrap提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。

  4)内置jQuery插件

  BootStrap提供了很多实用的jQuery插件,这些插件方便开发者实现web中各种常规特效。

  5)支持HTML5CSS3

  6)支持LESS动态样式

  LESS使用变量、嵌套、操作混合编码,编写更快、更灵活的CSS。它和BootStrap能很好的配合开发。

 

2.BootStrap开发工具

  拖拽

  1Jetstraphttps://jetstrap.com/

  2)在线编辑工具:Layout Ithttp://www.layoutit.com/

 

3.一般浏览器兼容性解决方式有两种:浏览器嗅探、浏览器功能测试。

  1)浏览器嗅探:通过解析navigator.userAgent来获取浏览器的类型和版本号,然后编写相应的兼容性代码,这种方式会导致代码与特定的浏览器类型和版本号紧密地绑定在一起。

  2)浏览器功能测试:更好、更普遍的做法是执行浏览器功能测试,即通过检测某项功能在当前浏览器中是否被支持,然后编写相应的兼容代码,这种方式不需要关心浏览器的类型和版本号。

 

   BootStrap中,通过使用样式修正对象集jQuery.CSSHooks用于兼容浏览器差异,覆盖默认的样式、读取和设置行为属性。

 

4.设计图片响应式

   要实现图片的智能响应,应该解决两个问题:

   1)自适应图片缩放尺寸

   2)在小设备上自动降低图片的分辨率

解决方案:

   在页面部分添加代码:

  

 

Viewport:网页默认的宽度、高度。

网页默认的宽度等于屏幕宽度(width=device-width);

网页初始大小占满屏幕面积的100%initial-scale=1.0

 

5.Less

Less扩展了CSS语言功能,它在CSS的语法基础上,引入了变量、混合(mixin)、运算和函数等特性,大大提升了CSS动态开发的能力,降低了CSS的维护成本,就像它的名称所暗示的,LESS可以让我们用更少的代码做更多的事。

6.typeScript

7.组件和插件

  组件是框架和样式,插件是交互行为和动态效果。

8.BootStrap提供了两种调用插件的方法:

   1data调用:

   data-toggle: BootStrap激活特定插件的专用自定义属性,它的值对应插件的字符串名称。

  大部分BootStrap插件还需要data-target属性配合使用。

  data-target: BootStrap自定义属性,用来指定控制对象,该属性值为一个jQuery选择符。

 

 

 

 

   2JavaScript调用

9.BootStrap在设计思路上一般遵循以下步骤:

   1)使用CSS继承性来统一CSS样式表中的基本样式

CSS所定义的100多种属性中,只有一部分具有继承性,而不是全部都具有继承性。,具有继承性的属性包括:字体属性、文本属性(个别属性不支持继承)、表格属性(个别属性不支持继承)、列表属性、打印属性(部分属性支持继承)、声音属性(部分属性支持集成)、鼠标样式。

盒模型、布局、定位、背景、轮廓内容等属性不支持继承。

CSS继承的结构性主要体现在内部结构会自动继承外部结构的可继承属性。

html{

   font-size:100%;

   -webkit-text-size-adjust:100%;

      -ms-text-size-adjust:100%;

}

body{

   margin:0;

   font-family: ”Helvetica Neue”, Helvetica, Arial, sans-serif;

   font-size: 14px;

   line-height: 20px;

   color:#333;

   background-color:#fff;   

}

   2)对于特定对象、组件所需要的特殊样式,可以通过重定义的方法来修正继承所带来的问题

   3)如果某种特殊样式使用比较普遍,通过定义特殊类的方式实现修正;如果这种特殊样式不是很普遍,则直接合并到组件样式表中,避免类的泛滥。

二、使用BootStrap快速开发网站

1.准备工作

  1)定制网站配色系统

  Eg:网页背景色、网页前景色、超链接颜色、鼠标经过颜色

  body { color:#333;

       Background-color:#e4e4e4;

  }

  a { color: #56A590;}

  a:hover, a:focus { color:#209E85; }

  2)定制栅格系统

  3)根据需要定制各种组件的基本样式或标签基本样式。对于这些非基本样式,建议在本地样式表中重置覆盖

  4)初始化BootStrap

  导入框架基本样式表文件和脚本文件

  

 

  

  

2.设计

你可能感兴趣的:(web前端)