BootStrap的入门和响应式的使用

在做前端开发中，其实有百分之四十的时间用来布局写样式，百分之三十用来写

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>

想要学习前端开发的同学，可以加群：

543627393 学习哦！

BootStrap的入门和响应式的使用相关推荐

html期末大作业Bootstrap医疗器械公司响应式网站源码0014
html期末大作业Bootstrap医疗器械公司响应式网站,兼容手机端项目截图: 部分代码展示 <!DOCTYPE html><html ><head><t ...
bootstrap不同分辨率显示滚动条_bootstrap基础快速入门-8 响应式显示与隐藏
大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解.有疑问留言交流哦. bootstrap是进阶html5很基础常用的前端框架,可以做自适应漂亮的界面 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
bootstrap自动生成html,利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing...
1.前言我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
bootstrap框架下的响应式自适应布局
响应式布局:一个网站的展示能够兼容多个终端(手机,iPad,PC等),而不需要为每一个终端单独做一个展示版本. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(vie ...
Bootstrap编写的一个响应式网页
首先得在bootstrap下载一个包导入项目内,https://v3.bootcss.com/getting-started/#download.链接在这里! Bootstrap: Bootstrap ...
Bootstrap项目实战，响应式网站（李炎恢）
网站首页布局与实现一.文件准备 1.导入bootstrap 相关css 和js文件,以及jQuery <link rel="stylesheet" href=" ...
Bootstrap 前端框架制作响应式网站
放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补).说做就做,花了一天的时间,谷歌开发者模式,仿制别人公司的页面(希望不会被查),做了个响应式小网页,可以 ...

BootStrap的入门和响应式的使用

BootStrap的入门和响应式的使用相关推荐

最新文章

热门文章