Bootstrap 响应式开发(2021.10.13)

本文介绍了Bootstrap响应式开发的概念,详细讲解了Bootstrap框架的使用,包括布局容器、栅格系统以及响应式工具的运用。并以阿里百秀首页为例,展示了如何在不同屏幕尺寸下实现布局调整。
摘要由CSDN通过智能技术生成

目录

一、响应式开发

1.框架含义

2.响应式

3.响应式尺寸划分

二、Bootstrap简介

1.Bootstrap概念

2.查阅Bootstrap文档

3.Bootstrap的使用

(1)创建文件夹结构

(2)创建HTML骨架结构

(3)引入相关样式文件

(4)书写内容

4.Bootstrap布局容器

(1)container 类

(2)container-fluid 类

三、Bootstrap栅格系统

1.选项参数(类前缀)

2.列嵌套

3.列偏移

4.列排序

四、响应式工具

五、阿里百秀首页案例


一、响应式开发

1.框架含义

框架就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

2.响应式

响应式需要一个父级做为布局容器(.container),来配合自己元素来实现变化效果。

原理:在不同屏幕下,通过媒体(PC/iPad/手机端)查询来改变布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式的变化。

3.响应式尺寸划分

屏幕类型 设置宽度为
超小屏幕(手机,<768px) 100%
小屏幕(平板,>=768px) 750px
中等屏幕(桌面显示器,>=992px) 970px
大屏幕(大桌面显示器,>=1200px) 1170px
举例

CSS

@media screen and (min-width:768px ) {
        .container {width: 750px;}   /*布局容器(768px以上的屏幕,container的宽度为750px)*/
    }

二、Bootstrap简介

1.Bootstrap概念

Bootstrap是基于HTML、CSS、JS的UI前端框架,使得Web开发更加快捷。

2.查阅Bootstrap文档

中文官网 http://www.bootcss.com/
官网 http://getbootstrap.com/
推荐使用 http://bootstrap.css88.com/

3.Bootstrap的使用

(1)创建文件夹结构

(2)创建HTML骨架结构

(3)引入相关样式文件

写在HTML的<head>中
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    //bootstrap.min.css是压缩过的文件(体积小),bootstrap.css是未压缩的文件

(4)书写内容

1)可以直接用Bootstrap预先定义好的样式(官网 —> 全局CSS样式 —> 将想要的图标的类名复制粘贴到HTML的<body>的标签中,作为class的属性值);

2)组件、字体图标

3)JavaStrap插件

4)定制

5)可以修改Bootstrap原来的样式,注意权重问题,主要靠class来定义样式。

4.Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个容器。

(1)container 类

.container是响应式布局的容器,是Bootstrap预定义好的类,固定宽度,自带左右padding值15px

清除 自带左右padding值15px 的方法:

  • container 里套用 row ,这两个的padding相互中和;
  • 重设container的padding值(重叠性);

(2)container-fluid 类

流式布局容器,百分百宽度
占据全部视口(viewport)的容器
适合单独做移动端开发

(3)row 类

自带左右padding值-15px

三、Bootstrap栅格系统

栅格系统将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列。

Bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,再把container划分为12等份

1.选项参数(类前缀)

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

1)如果孩子的份数相加等于12,则孩子能占满整个contai

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值