Bootstrap & 响应式
要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ?
1.Bootstrap 简介
Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html、CSS、JavaScript等前端技术,2011年8月在GitHup上发布,一经推出就颇受欢迎。
Bootstrap中定义了一套CSS样式和与样式对应的JQuery(jQuery 是一个快速的、小巧功能丰富的JavaScript库)代码,应用时我们只需提供固定的HTML结构,添加 Bootstrap中提供的class名称,就可以完成指定的效果实现。
Bootstrap包中提供的内容包括基本结构、css、布局组件、JavaScript插件等。例如:
基本结构:Bootstrap提供了一个带有网络系统、链接样式、背景的基本结构。
CSS:Bootstrap自带全局的css设置、定义基本的HTML元素样式,可扩展的class,以及一个先进的栅格系统。
布局组件:包含了实际中可重用的组件。
Javascript插件:Bootstrap包含了十几个自定义的JQ插件。
定制:开发人员可以定制Bootstrap的组件、LESS变量和JQ插件来得到一套自定义的版本。
2.Bootstrap优势:
移动设备优先、浏览器支持、响应式设计、容易设置、良好的代码规范、组件、定制、容易上手
望能够提出问题,一起解决。
Bootstrap & 响应式的更多相关文章
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
- Bootstrap 响应式表格
响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
- Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...
- bootstrap 响应式工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- codeforces 528D Fuzzy Search
链接:http://codeforces.com/problemset/problem/528/D 正解:$FFT$. 很多字符串匹配的问题都可以用$FFT$来实现. 这道题是要求在左边和右边$k$个 ...
- web.xml 中配置了error-page但不起作用问题
问题: 在web.xml 中配置了 error-page,但是好像不起作用,就是跳转不到指定的页面. 配置信息如下: <!-- 400错误 --> <error-page> & ...
- (知识点)JavaScript继承
1)原型链 ①原型链示例 function Shape() { this.name = 'shape'; this.toString = function(){ return this.name; } ...
- Quartz (一)
1 核心接口 1.1 Scheduler---核心调度器 1.2 Job---任务 1.3 JobDetail---任务描述 1.4 Trigger---触发器 2 触发器 Tigger(CornTr ...
- 全球移动互联网大会gmic 2017为什么值得参加?
长城会CEO郝义认为,"科学产业化将会推动科学复兴,"而本次GMIC 北京 2017也将首次引入了高规格科学家闭门峰会,专门设置G-Summit全球科学创新峰会,以"科学 ...
- R语言分析(二)——薛毅R语言第二章后面习题解析
包括2.2—2.6中间的习题,2.2的习题中第三问和第四问,应该有其他的解答方法,但我看他的题目,似乎是在A和B的基础上进行,所以就选择了使用for循环的方法 做着习题,又不断查着书,这样,书籍也熟悉 ...
- Servlet简单总结(一)
一.Servlet简单总结 1.1. 什么是Servlet Servlet是JavaEE三大组建之一,是使用Java语言编写服务器端的程序,主要用来处理Web应用程序中的请求-响应.Servlet并没 ...
- VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...
- 将github上的项目源码导入到eclipse中
1.注册github帐号 在github上注册一个自己的帐号. 2.安装git插件egit 在eclipse中安装git插件egit,安装方法可以参考这篇文章: http://www.cnblogs. ...
- GTD:让大脑用来思考,而不是用来记事!
前段时间听刘润大师分享了一套GTD时间管理方法理论,感觉非常受用!现拿来跟大家分享下,这套方法是刘润老师践行20多年总结提炼的精华,经亲自实践确实行之有效. 俗话说:工欲善其事,必先利其器!人生也是如 ...