在做前端开发中,其实有百分之四十的时间用来布局写样式,百分之三十用来写JS逻辑交互,百分之三十时间用来测试调bug,可以看的到的是,用在布局+样式的时候会比较多,
所以会有很多的前端框架诞生,例如bootstrap
前端框架包含有设定好的html布局结构,css样式,一些js效果,理论上将,不需要写一行代码,只需复制粘贴就可以实现一个静态页面
官方不要脸的介绍:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
用bootstrap不仅可以写PC的页面,还可以做响应式
响应式:利用媒体查询等技术,通过检测浏览器的尺寸不同,来显示不同的布局结构,原理就是,媒体查询可以检测到屏幕的尺寸是否处于某一个范围,如果是的时候可以让某一段css代码起作用,来实现结构切换
boot 默认的将屏幕划分成了四种:
0-768 xs ;768-992 sm ; 992-1200 md;1200- lg ;
boot 提供了两个布局容器,这两个布局容器是要作为某一个大的区域的最外层元素的,会和其他的一些布局类名配合使用
.container .container-fluid
container-fluid在任意屏幕下宽度都是百分之一百
container 是在xs屏永远都是100%;768-992,宽度:768;992-1200,宽度:992;1200- 宽度:1200,永远居中
boot 提供了栅格系统(12栅格化,网格化,网格系统)会让我们在布局的时候,想象着将一行的空间分成12份,通过设置每一个元素占几份来控制元素的排列
row类名可以在容器中将某一行分成12份
col-type-num 可以确定某一行中的某一个元素在type屏幕的情况下占num份
注意,在使用这些类名的时候有小屏优先这样的原则:
在写媒体查询样式的时候,应该先写小屏的样式,再写大屏的样式,小屏解析的css代码会较少,性能较高
col-type-offset-num 设定的是某一个元素在某一个屏幕尺寸下向右偏移几份
例如 我们只需要加上class名即可

<li class=" col-xs-12 col-sm-6 col-md-3 news"><img src="data:images/1.jpg"  alt=""></li>
<li class=" col-xs-12 col-sm-6 col-md-3 news"><img src="data:images/2.jpg"  alt=""></li>
 

BootStrap的入门和响应式的使用的更多相关文章

  1. Bootstrap历练实例:响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例:响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  3. Bootstrap历练实例:响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  4. bootstrap入门-3.响应式原理

    Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 ...

  5. 利用Bootstrap快速搭建个人响应式主页(附演示+源码)

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  6. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  7. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

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

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

  9. 【Bootstrap】如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

随机推荐

  1. NDK Jni 开发(1)

    1. 学习地址 http://my.oschina.net/lifj/blog/177087 http://www.cnblogs.com/devinzhang/archive/2012/02/29/ ...

  2. 阿里巴巴Java规约插件试用

    阿里Java开发规约Eclipse插件介绍 阿里巴巴集团配合<阿里巴巴Java开发手册>PDF终极版开发的IDE插件,目前包括IDEA插件.Eclipse插件. 安装 检查环境 插件要求: ...

  3. drcom 不耍流氓

    最近在研究PPPoE,于是做出了一个可以使用WIFI的客户端. 本软件只可以使用于学习交流,不可以使用于商业用途. 本软件在广工西区测试可以使用,软件开启360wifi可以使用.因为心跳包可能修改,本 ...

  4. mybatis逆向工程

    一.背景 在实际开发中我们会自己去写mapper映射文件,接口,数据库表对应的实体类,如果需求任务比较少,咱们还可以慢慢的一个一个去写,但是这是不现实的,因为在工作中我们的任务是很多的,这时mybat ...

  5. MongoDB索引限制

    1. 额外开销: 每个索引占据一定的存储空间,在进行插入,更新和删除操作时也需要对索引进行操作.所以,如果你很少对集合进行读取操作,建议不使用索引. 2. 内存使用: 由于索引是存储在内存(RAM)中 ...

  6. 域名系统DNS

    一.域名系统是什么 域名系统其实就是一个把主机名解析为IP地址的名字系统. 因特网使用层次树状结构的命名方法,并使用分布式的域名系统DNS.因特网的域名系统DNS被设计成一个联机分布式数据库系统,并采 ...

  7. python中openpyxl的用法【安装,以及一些基本的操作】

    概述 Openpyxl是python中简单易用的操作excel电子表格的一个模块.接下来呢,跟博主一起学习一下吧  ----_<_>_---- 首先先清楚一些excel的基本概念: 在op ...

  8. spring 学习笔记1

    Spring 学习记录 任何一个成功的应用都是由多个为了实现某一个业务目标而相互协作的组件构成的.这些组件必须彼此了解,并相互协作来完成工作. 在Spring 中,对象无需自己负责查找或创建与其关联的 ...

  9. Java企业微信开发_Exception_02_java.security.InvalidKeyException: Illegal key size

    今天换了重新装了一个jdk,然后运行昨天还好好的企业微信工程,结果启动的时候就给我报了这么个错: java.security.InvalidKeyException: Illegal key size ...

  10. 给资源文件添加指纹(Gulp版)

    至于为什么要费尽心思地给文件添加指纹,请参看前端静态资源缓存控制策略.这次要达到的小目标就是生成的资源文件能够被客户端缓存,而在文件内容变化后,能够请求到最新的文件. 需要用到的 gulp 插件是 g ...