响应式布局---2. Bootstrap前端开发框架

1.1 介绍

Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的,它简洁灵活,使得web开发更加快捷。

1.2 使用

控制权在框架本身,使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲:

1.2.1 创建文件夹结构

在https://v3.bootcss.com/下载bootstrap的压缩文件,解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下:

1.2.2 创建html骨架结构、引入相关样式文件

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
    解决ie9以下浏览器对html5新增标签不识别,并导致css不起作用的问题
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    解决ie9以下浏览器对css3 Media Query 的不识别问题
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>

1.2.3 书写内容

  • 直接拿Bootstrap预先定义好的样式来用
  • 修改Bootstrap原来的样式,注意权重问题
  • 学好Bootstrap的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
<body>
    <button type="button" class="btn btn-success">(成功)Success</button>
    <!-- bootstrap是根据类来创建外观形状 -->
    <div class="btn btn-success login">登陆</div>
    <div class="btn btn-danger">未成功</div>
</body>
/* 利用我们自己写的样式覆盖原先的样式 */
.login {
    width: 88px;
    height: 45px;
}

1.3 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstrap预先定义好了这个类,叫.container,它提供两个做此用处的类。(注意:这个类名必须是container,不可更改)

.container类

  • 响应式布局的容器 固定宽度
  • 大屏(>=1200px)宽度定为1170px
  • 中屏(>=992px)宽度定为970px
  • 小屏(>=768px)宽度定为750px
  • 超小屏(100%)
    上述宽度都是设定好的,不可以像之前一样任意修改

    .container-fluid类

  • 流式布局容器百分比宽度
  • 占据全部视口(viewport)的容器
  • 适合于单独移动端开发
<body>
    <!-- 此时拉伸屏幕可以看到container盒子的宽度自动在1170px、970px、750px、100%之间变化 可以与01-响应式布局原理中的代码进行比较 这里省略了媒体查询 实际上媒体查询的部分在bootstrap中定义好了 -->
    <!-- 注意在bootstrap里面为container定义了一个左右15px的内边距 -->
    <div class="container">123</div>
    <!-- 适合于单独移动端开发 不适合响应式开发 -->
    <div class="container-fluid">abc</div>
</body>

超小屏:

大屏:

原文地址:https://www.cnblogs.com/deer-cen/p/12157915.html

时间: 2024-11-06 21:13:23

响应式布局---2. Bootstrap前端开发框架的相关文章

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列

响应式布局及bootstrap

bootstrap:移动端有限.没有ID选择器,就算有也是 通过class名称来的容器 container ,row要放在容器container中,且一个网页只允许有一个container 禁止响应式布局:1,写一个宽度:2,去掉<meta·······>.col-xs:禁用超小模式 所有JavaScript插件都依赖于jQuery 基本模板[移动端上写代码,都要写mate viewport] 定制Bootstrap js放在body结束标签之前 HTML5文档类型<htmmml lan

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

响应式布局之BootStrap

本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 而bo

推荐12个创建响应式布局的优秀网格框架

在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Pure Pur

基于Bootstrap3制作响应式布局网站(一)

前言 原创文章,欢迎转载,请保留出处. 有任何错误.疑问或者建议,欢迎指出. 我的邮箱:[email protected] 现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷.Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局. 何为响应式布局 我们可以查阅百度百科得到比较权威的解析: 响应式布局是Ethan Marcotte在2010年5

创建响应式布局的优秀网格工具集锦《系列四》

如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.在这篇文章中,我们为您呈现了一组优秀的网格工具清单.如果我们错过了任何没有列出在这个清单上的东西,请分享给我们. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加