响应式网站设计---Bootstrap

更新日期: 2019-05-03阅读: 2.2k标签: bootstrap

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。


使用基于Bootstrap的栅格系统

Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

 

1. 栅格系统的工作原理

(1)行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列内补(padding)。 
(2)通过行(row)在水平方向创建一组列(column)。 
(3)自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。 
(4)类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。
(5)通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。 
(6)栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 
(7)如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。 
(8)栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。 

<div class="container">
	<h1>Hello, world!</h1>
	<div class="row">
		<div class="col-md-3" style="background-color: #dedef8;box-shadow: 
      inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
			<h4>第一列</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div class="col-md-9" style="background-color: #dedef8;box-shadow: 
      inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
			<h4>第二列 - 分为四个盒子</h4>
			<div class="row">
				<div class="col-md-6" style="background-color: #B18904;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.
					</p>
				</div>
				<div class="col-md-6" style="background-color: #B18904;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6" style="background-color: #B18904;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					</p>
				</div>
				<div class="col-md-6" style="background-color: #B18904;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
				</div>
			</div>
		</div>
	</div>
</div>


链接: https://www.fly63.com/article/detial/3185

bootstrap的响应式开发,如何使用bootstrap制作响应式布局网站

bootsrap响应式开发是为了让用户在不同尺寸的设备上,同一URL下浏览网页都可以获得良好的视觉效果。为了实现bootsrap响应式设计,我们需要创建适配各种设备尺寸的css,让页面加载的时候去匹配对应的css样式。

网站前端有必要学习bootstrap么?前端从bootstrap中可以学到什么

bootstrap出现的本意是让web开发更迅速、简单。那么作为前端开发的我们有必要学习bootstrap吗?作为前端开发的我们可以从bootstrap中可以学到什么?

bootstrap组件有哪些?bootstrap常用组件推荐

这篇文章主要整理bootstrap中常用的组件,比如:表格、表单验证、文件上传、复选下拉框、弹出框、时间组件、加载效果等

Bootstrap后台管理模板推荐_最值得拥有的免费Bootstrap后台管理模板

在网站开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台:AdminLTE、Gentelella Admin、Vali Admin、ModularAdmin、Metis、Ace

和 jQuery 说再见,Bootstrap 5 将移除对其依赖

Bootstrap 最新版本 4.3.1 已发布,作为 Bootstrap 4.3 发布的一部分,团队也公布了下一个主要版本 Bootstrap 5 的开发计划。将会在开发 Bootstrap 5 的过程中实现一些关键变化

bootstrap-select使用过程中的一些问题

这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。点击没有反应,下拉框不出现

vue-cli项目引入jquery和bootstrap

webpack.ProvidePlugin插件里面可以配置全局引用,比如此处配置了jquery的使用,后面再vue里使用$,jQuery,windows.JQuery都等同于使用jquery,不需要再require或import

bootstrap-table树形结构(展开和折叠)

今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过Google才找到。下面分享给大家

Vue 组件:给Bootstrap Modal增加缩放功能

Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势,它的侵入性很低,可以以各种方式集成到其它项目当中。在我厂的各种产品里,都有它的用武之地。前两天,老板抱怨,说 Modal(弹窗)在他的屏幕上太小

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!