bootstrap框架应用

---------------------------------------------------------------bootstrap-------------------------------------------------

开发中文网：v3.bootcss.com

（1）前段？框架？

用户 --》前端应用程序 ---》后端应用程序 ---》后端服务器。

框架：Library 或者lib，都值得是框架。第三方提供的，一些接口或者功能。

一.Bootstrap框架是什么？？

BootStrap,最早的时候是两个单词的合成。现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架。

二.为什么要学boot，而且为什么那么火爆？

(1)容易上手，学过HTML和CSS的人就能来学习

（2）游览器支持，几乎所有的游览器都支持bootstrap框架

（3）开发速度快，代码优雅简单

（4）移动先行，移动设备优先：自从3。0版本以后更好的适应于移动端开发。但是并不是不能开发PC端

（5）响应式设计：Bootstrap自带响应式设计，CSS可以适用于PC\移动端设备的自适应

三.strap所要学的方向或者东西？

（1）基本的页面结构：网格系统和基本的页面模板

（2）全局CSS样式：框架提供的CSS类

（3）组件：导航栏、警告框、下拉菜单等等

（4）JavaScript插件：用到的是JQ支持的插件。轮播图等等。。

(5) 定制：定制自己的组件（不是重点）

四.如何下载呢？

（1）Bootstrap: 这是一个专有的名词，意思为引导指令和引导程序

（2）下载：http://www.bootcss.com/ 是boot的官网，文档是英文的

（3）中文的官方网站：v3.bootcss.com 现在学的而是3版本

类似的框架还有很多：妹子UI amaze UI 也是一样的，是国内开发的

五.viewport使用

<!-- width=device-width 让网页的尺寸等于手机的尺寸

user-scalable = no; 禁止缩放（不推荐所有页面使用，具体看情况）

initial-scale = 1;使CSS里面的标签按照设置的尺寸1:1显示在手机上

-->

六,布局容器-版心

（1）bootstrap已经给 body设置了基本的字体.颜色等等。所有的a标签，有颜色。而且正常状态下不显示下划线，除了hover显示下划线。

（2）布局容器：container 版心。bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。

版心取值范围

1.屏幕大小手机（<768）宽度宽度100%

2.小屏幕 768--992 宽度为750px

3.显示器 992-1200 宽度为970

4.超大屏幕大于1200 宽度为1170

注意：栅格系统使用会出现的几种情况

@ 第一种情况只设置md,那么 lg也会和md现象一致。而xs,md没有响应式样子

@第二种情况只设sm，那么 sm\md\lg一个样子，xs没有样子

@ 第三种情况设置sm\md 那么 sm一个样子， md和lg一个样子，xs没有样子

第四种情况只设置xs ，那么xs\sm\md\lg全设置上了（所以说xs特殊）

注：若有同行中元素A设置offset，元素B不设置，则B还会紧贴着A，并不会覆盖住B；若A偏移，B也偏移，那他们就各自偏移，互不影响；

也就是offset会影响其他，会带着其他一起偏移，

但，push-几个单位或者pull-几个单位，不会影响其他，也就是，若A发生偏移，B没有设置偏移，所以会出现A覆盖住了B.

（3）栅格系统

《1》栅格系统：是bootstrap提供的响应式布局方式

栅格系统的核心

row（被划分为12个大小的单位）

列列列

row

-------------------------------------------------------望共同进步--------------------------------------------------

秒客网

bootstrap框架应用

相关文章