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的介绍以及如何使用的更多相关文章

  1. Bootstrap框架介绍

    Bootstrap框架介绍 一.Bootstarp环境部署 1>.什么是Bootstartp框架 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架.它 ...

  2. Bootstrap的介绍和响应式媒体查询

    Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...

  3. BootStrap容器介绍

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. Bootstrap简单介绍

    一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式 ...

  5. bootstrap的介绍 和使用

    开发中文网: v3.bootcss.com   前端?框架? 用户 -->  前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都指得是框架 ...

  6. Bootstrap组件介绍

    一.下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.实例 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 ...

  7. 前端框架Bootstrap简单介绍

    下载: 解压之后: 把这些文件拷贝到项目中 页面使用时  只需要引入: 然后我们就可以参考官网来设计需要的前端页面了 设计一个按钮:button 只需要标明css样式中使用的类  下面就是现实效果:

  8. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  9. Bootstrap框架的学习(一)

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

随机推荐

  1. 基于Spring-WS的Restful API的集成测试

    在很多Java企业级应用中,Spring占据了非常重要的位置,这就导致了基本上的技术选型都是围绕着Spring来, 比方说笔者最近的项目需要开发一个Restful的API接口,选型的时候就说,客户架构 ...

  2. linux apache添加多站点配置(Ubuntn和Centos)

     Linux Apache 多站点配置 Centos 配置方式: 找到 /etc/httpd/conf/http.conf 添加监听端口,eg: Listen 89 虚拟机配置,一个端口对应一个 &l ...

  3. python 使用内置函数sorted对各种数据类型进行排序

    python有两个内置的函数用于实现排序,一个是list.sort()函数,一个是sorted()函数. 区别1:list.sort()函数只能处理list类型数据的排序:sorted()则可以处理多 ...

  4. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  5. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  6. MCMC(二)马尔科夫链

    MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)M-H采样和Gibbs采样(待填坑) 在MCMC(一)蒙特卡罗方法中,我们讲到了如何用蒙特卡罗方法来随机模拟求解一些复杂的连续积分或 ...

  7. iOS回顾笔记(09) -- Cell的添加、删除、更新、批量操作

    iOS回顾笔记(09) -- Cell的添加.删除.更新.批量操作 项目中经常有对UITableViewCell做各种操作的需求: 添加一个新的cell 删除某行cell 刷新cell上某行数据(如修 ...

  8. 关于SQL调优(Distinct 和 Exits)

    今天写了一段查询人员Id和人员编号的,由于需要从其他的表中取条件,因为人员表和另外的表对应的是一对多的关系,所以我使用了Distinct关键字对用户编号进行去重复,然后发现那个效率简直没法看,然后旁边 ...

  9. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  10. Object-C开发常用宏定义

    Object-C开发中宏会将经常用到的系统常量进行封装,方便使用: 1.获取通知中心 #define EYNotificationCenter(name, object, userInfo) [[NS ...