对于Bootstrap的介绍以及如何使用
Bootstrap是HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强大包含了整个HTML,CSS,JS的各个方面。
通过Bootstrap制作的网站,极大地节省了代码,而且网页的整洁度有明显提高,熟练掌握使用可以更快更好的完成网站的制作。
http://v3.bootcss.com/getting-started/这是Bootstrap3.3.7的下载地址
如何使用:

如上,如果要插入自己的css文件,要将自己的css文件插入在
之后
JS文件则必须将JQuery文件放在Bootstrap文件之前,否则运行会出错。

在head中要记住写入这段代码,虽然是注释体,但是会生效:第一个js让ie8能支持HTML5的新标签
第二个js让ie8能支持CSS3媒体查询
那么到底如何在代码中应用,需要从Bootstrap的官方网站了解各个样式的组名
Bootstrap是通过不同的组名来判别各个标签应有哪种效果

例如一个table上有了这些class,那么出现的table样式为:

而不是传统的table样式
通过对每个标签不同的分组,可以实现各种不同的效果,并不需要css样式或js的设置改动,只需要在自己的css文件中改变需要的文字样式或颜色等即可快速做出框架网站。
栅格系统是Bootstrap制作响应式的重要系统,通过使用栅格,可以快速的完成响应式

栅格系统有这几种宽度适配,具体应用为:

表现出的效果为:全屏

宽度逐步减少:

宽度再次减少:

变为一列显示的效果。栅格系统熟练应用,可以使响应式布局迅速完成,只需在内部设置好相应的内容即可。
对于Bootstrap的介绍以及如何使用的更多相关文章
- Bootstrap框架介绍
Bootstrap框架介绍 一.Bootstarp环境部署 1>.什么是Bootstartp框架 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架.它 ...
- Bootstrap的介绍和响应式媒体查询
Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...
- BootStrap容器介绍
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap简单介绍
一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式 ...
- bootstrap的介绍 和使用
开发中文网: v3.bootcss.com 前端?框架? 用户 --> 前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都指得是框架 ...
- Bootstrap组件介绍
一.下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.实例 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 ...
- 前端框架Bootstrap简单介绍
下载: 解压之后: 把这些文件拷贝到项目中 页面使用时 只需要引入: 然后我们就可以参考官网来设计需要的前端页面了 设计一个按钮:button 只需要标明css样式中使用的类 下面就是现实效果:
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
随机推荐
- fopen中的mode(20161115)
mode mode 参数指定了所要求到该流的访问类型.可以是以下: fopen() 中 mode 的可能值列表 mode 说明 'r' 只读方式打开,将文件指针指向文件头. 'r+' 读写方式打开,将 ...
- ConfigParser-- 读取写入配置文件
基础读取配置文件 -read(filename) 直接读取文件内容 -sections() 得到所有的section,并以列表 ...
- 【树莓派】制作树莓派最小镜像:img裁剪瘦身
制作树莓派镜像,可以参考这篇文章:http://blog.csdn.net/talkxin/article/details/50456282 摘录部分要点内容如下(如果作者不允许转载,请联系即删除): ...
- 从输入url到页面加载完成发生了什么?——前端角度
这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到.这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- JSP九大内置对象的作用和用法总结(转)
SP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1.r ...
- XJOI1652Matrix67的情书
Matrix67的情书 恺撒大帝曾经使用过这样一种加密术:对于明文中的每个字母,恺撒大帝会用它后面的第t个字母代替.例如,当t=3时,字母A将变成C,字母B将变成D,--,字母Y将变成A,字母Z将变成 ...
- win7下nsis打包exe安装程序教程
下载软件包: NSIS中文版 :https://pan.baidu.com/s/1mitSQU0 装好之后会出现两个软件:Nullsoft Install System 和 VNISEdit 编译环境 ...
- JavaScript基础学习(四)—Object
一.Object的基本操作 1.对象的创建 在JavaScript中,创建对象的方式有两种:构造函数和对象字面量. (1)构造函数 var person = new Object( ...
- Liferay中利用URL传参数
业务场景:现在有一个新闻系统,有两个页面,A是新闻列表页面/web/guest/home,B是新闻的详情页面/web/guest/newsview. 业务逻辑为:在A页面中,点击新闻的标题进入B页面, ...