ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 软件工程 >> Bootstrap自适应 响应式布局和BootStrap 全局CSS样式

Bootstrap自适应 响应式布局和BootStrap 全局CSS样式(1/5)

来源:网络整理     时间:2017-11-24     关键词:Bootstrap自适应

本篇文章主要介绍了"Bootstrap自适应 响应式布局和BootStrap 全局CSS样式",主要涉及到Bootstrap自适应方面的内容,对于软件工程感兴趣的同学可以参考一下: 1、什么是响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。简而言之,就是一个网站能够...

1、什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。

简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

2、bootstrap简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

是基于LESS的一套前端工具库,意图非常明显,想以一个项目,整合Compass,Blueprint,h5bp的目标功能,成为web前端的一站式解决方案。
* 一套完整的基础css模块,但不如compass丰富和强大
* 一套预定义样式表,包括一个格子布局系统,和blueprint提供的差不多,只是设计风格不一样
* 一组基于Jquery的js交互插件,这是Bootstrap真正强大的地方,也是她严格意义上可以取代Blueprint的原因所在,这些非常不错的小插件,包括对话框,下拉导航等等,不但功能完善,而且十分精致,正在成为众多jquery项目的默认设计标准。

 响应式布局和BootStrap 全局CSS样式

bootStrap之全局CSS样式

一、概述

1、移动设备优先

基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统;

Bootstrap 是移动设备优先的

通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉

 

2、布局容器

bootStrap为页面内容和栅格系统提供了一个布局容器:container,提供了两种,但是不能相互嵌套:

.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

3、栅格类

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

类的前缀: col-xs-(手机) col-sm(平板) col-md(桌面显示器) col-lg(大桌面显示器)

 响应式布局和BootStrap 全局CSS样式

3.1 水平排列

 响应式布局和BootStrap 全局CSS样式

Bootstrap自适应相关图片

Bootstrap自适应相关文章