Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介:

Bootstrap是Twitter(推特)开发的,目前最受欢迎的前端开源框架,基于jQuery用于开发HTML、CSS、JavaScript,简洁灵活,常用于开发响应式布局及移动端开发。其中文官方文档:http://www.bootcss.com 官网:http://getbootstrap.com 推荐网站:http://bootstrap.css88.com

在这里插入图片描述

下载bootstrap:

拿到bootstrap文件包的方式有很多种,例如:官网下载、npm(后面介绍完node可以使用npm中:npm install bootstrap@4.0.0-beta.2直接download下来4.0版本)、使用在线文档连接等。考虑到某些读者可能没接触到node,这里小编通过官方下载bootstrap来介绍:访问官方网址:http://getbootstrap.com,点击右上角Download选择对应的版本继续点击编译好的(Compiled CSS and JS)bootstrap下载,这里小编采用bootstrap4进行简介,bootstrap4放弃了IE8及iOS6,目前仅支持IE9+及iOS7+,实际开发中需要注意这点。

编译后的bootstrap文件目录结构如下:(只需要拿需要的文件即可)

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map

引入资源:

需要注意:bootstrap基于jQuery,但是下拉菜单(dropdown)、弹出框(popover)和工具提示(tooltip)组件依赖Popper(https://popper.js.org/) 开发,bootstrap文件分css文件和js文件,如果只需要样式,可以不需要引入js文件,如:

	<!--将bootstrap文件及依赖文件引入到head靠前位置,便于自己样式层叠--><link rel="stylesheet" href="lib/bootstrap/bootstrap.css"><!-- 条件注释,第一个是解决html5新标签兼容性的,第二个是解决css媒体查询兼容问题的,且此依赖不能以files方式打开使用--><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.js"></script><script src="lib/respond/respond.js"></script><![endif]--><script src="lib/jquery/jquery.js"></script><!-- 引入jQuer依赖(bootstrap依赖jQuery库) --><script src="lib/popper/popper.js"></script><!-- 用于弹窗、提示、下拉菜单时引入此依赖,但是目前的 bootstrap.bundle.js已经包含了/popper.js,自己判断版本自行增删  --><script src="lib/bootstrap/bootstrap.js"></script><!-- 引入bootstrap.js文件-->

基本结构说明:

	<!-- 1.bootstrap要求使用HTML5文档类型,现在最新html5声明如下(可以简写为html): -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 通常网页开发都会声明编码--><!-- 2.bootstrap常用于移动端开发,如果是移动端开发,记得开启视口,其标准视口书写如下(新增自动适应手机屏幕宽度属性:shrink-to-fit=no,解决iOS9兼容问题): --><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no"><!-- 3.引入jQuery插件,因为bootstrap是基于jQuery开发的: --><!-- <scrip src="lib/jquery/dist/jquery.js"></scrip> --><!---jquery本地文件在测试关闭提示框时出现报错,经调试,修改为网络资源可以正常运行--><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- 4.引入bootstrap中样式文件: --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 5.如果需要做弹窗、提示、下拉菜单等功能,引入如下依赖: --><scrip src="lib/bootstrap/js/bootstrap.bundle.min.js"></scrip><!-- 6.如果需要使用bootstrap中行为,引入bootstrap中js文件: --><script src="lib/bootstrap/js/bootstrap.min.js"></script><!-- 7.条件注释,第一个是解决html5新标签兼容性的插件,第二个是解决css媒体查询兼容问题的,且此依赖不能以files方式打开文件--><!--[if lt IE 9]><sc src="lib/html5shiv/html5shiv.js"></sc><sc src="lib/respond/respond.js"></sc>
<![endif]--><!-- 8.引入自己编写的css文件层叠掉bootstrap中不符合的样式: --><link rel="stylesheet" href="test.css"><title>Document</title>
</head><body><div class='container'>配置好此模板,在这里就可以使用bootstrap了</div>
</body></html>

使用bootstrap中功能:

bootstrap中的功能使用起来很简单,如果是给自己编写的html骨架添加功能,只需要添加bootstrap中定义好有功能的类名即可,如果需要使用某个定义好的功能块,那么直接将案例代码拷贝到自己的代码中即可。下面将介绍实际开发中常用的功能:

响应式容器:

	<!-- container:定义一个响应式容器,使有此类名的容器在不同尺寸设备下显示不同的尺寸,且水平居中,当小于570px时不再做变小 --><div class='container'></div>

满屏容器:

	<!-- container-fluid:定义一个占据全部视口的容器,无论设备屏幕尺寸多大,总是100%占据视口宽度 --><div class='container-fluid'></div>

栅格系统:

默认把页面内容分成12等份(当然自己可以定制份数),由行和列组合的布局页面,网格状布局,在一个响应式容器中定义行和列。由类名row定义栅格系统的行,由col-x-n定义栅格系统的列。col-x-n中n表示所占栅格12份中的几份,x参数:(xl屏幕尺寸大于1200px)其他如下:

栅格嵌套:每个栅格中是可以嵌套其它栅格的,就像div一样,可以相互嵌套。

栅格偏移:col-(lg/md/sm/xs)-offset-n,给某个栅格添加此类可以使这个栅格向后偏移n份。

栅格排序:col-(lg/md/sm/xs)-push/pull-n,将某个栅格push推后几份或将某个栅格pull拉前几份。

	<div class="container"><!--1.栅格系统要放在固定宽度或全屏容器中,实际开发中会利用bootstrap的响应式容器(媒体查询原理固定的尺寸)--><div class="row"><!--row定义行--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--col定义列,其中xs-12表示当在bootstrap中定义的xs屏幕时,此列占一行中的12份,即一行占满;lg-2表示当在bootstrap中定义的尺寸为lg时,此时这列占一行中的2份,即2/12--><!--栅格嵌套开始:--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row"><!--在一个col中可以继续嵌套row行,row行中可以继续划分列,如:--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套a</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套b</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套c</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套d</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套e</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套w</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div><!-- 栅格偏移col-x-offset-n:n表示这列向右偏移n份 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row"><div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">栅格偏移</div><div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">栅格偏移</div><!--col-lg-offset-4表示在lg尺寸下向右偏移4份--></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div><!-- 栅格排序push推、pull拉 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row arr"><div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">栅格排序-左边</div><div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">栅格排序-右边</div></div></div></div></div>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575330.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…

Repository 仓储,你的归宿究竟在哪?(一)-仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…

浏览器基础知识

Web浏览器的主要功能是展示网页资源&#xff0c;即请求服务器并将结果展示在窗口中。工作原理大概如下&#xff1a; 地址栏输入URL 浏览器根据输入的URL查找域名的IP地址&#xff0c;DNS查找过程如下&#xff1a; 浏览器缓存——浏览器会缓存DNS记录一段时间&#xff0c;不同浏…

喜用神最正确的算法_各种电磁仿真算法的优缺点和适用范围(FDTD, FEM和MOM等)...

从实际工程应用的角度谈一下我对这几种算法的理解。先说结论&#xff0c;FDTD算的快但是不精确&#xff0c;可以用来算电大尺寸的物体&#xff0c;要是一个物体的尺寸大于10个波长&#xff0c;一般的服务站是跑不动FEM的&#xff0c;那必须得用FDTD了。FEM最经典的电磁仿真软件…

护士资格证延续注册WEB服务调用失败_服务熔断

熔断机制是应对服务雪崩效应的一种微服务链路保护机制&#xff0c;当扇出链路的某个微服务不可用或者响应时间太长时&#xff0c;会进行服务的降级&#xff0c;进而熔断该节点微服务的调用&#xff0c;快速返回”错误”的响应信息。当检测到该节点微服务响应正常后恢复调用链路…

db2 删除索引_MYSQL进阶——索引

索引模型hash索引hash索引主要适用于等值查询的场景&#xff0c;排序&#xff0c;模糊搜索等场景并不适用有序数组有序数组可用于非等值查询&#xff0c;排序等场景&#xff0c;但是由于写数据时需要对数组中的元素进行位移&#xff0c;所以一般用于静态数据的场景二叉树二叉树…

react 导航条选中颜色_调整安卓手机的颜色以更好地查看一切

并非所有人都有相同的区分颜色的能力。我们对屏幕上色彩配置的需求甚至口味可能会因人而异。幸运的是&#xff0c;Android为我们提供了多种本地工具&#xff0c;能够调整手机的颜色。我们的手机显示数百万种音调&#xff0c;这些音调是由屏幕配置或终端如何解释从某些应用程序接…

linux进程调度之 FIFO 和 RR 调度策略

转载 http://blog.chinaunix.net/uid-24774106-id-3379478.html linux进程调度之 FIFO 和 RR 调度策略 2012-10-19 18:16:43分类&#xff1a; LINUX 作者&#xff1a;manuscola.beangmail.com 博客地址&#xff1a;bean.blog.chinaunix.net 最近花了10几天的时间&#xff0…

echarts 获取点击的y轴数值_有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物...

有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物本文作者&#xff1a;Summer轴手性联芳基二醇骨架广泛存在于天然产物、生物活性分子、有用的手性配体以及催化剂中(Figure 1a)&#xff0c;因此&#xff0c;轴手性联芳基二醇化合物的合成受到广泛关注且已经取得了…

H264解码的一个測试程序

网上看到的一个H264视频格式的解码測试程序&#xff0c;能够用来參考其逻辑流程。 代码例如以下&#xff1a; Test_Display_H264(){ in_fd open(H264_INPUT_FILE, O_RDONLY); //video file open fstat(in_fd, &s); …

spring框架 web开发_go语言web开发框架学习:Iris框架讲解(一)

Golang介绍Go语言是谷歌推出的一种全新的编程语言&#xff0c;可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说&#xff1a;我们之所以开发Go&#xff0c;是因为过去10多年间软件开发的难度令人沮丧。谷歌资深软件工程师罗布派克(R…

linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

lsix 是一个简单的命令行实用程序&#xff0c;旨在使用 Sixel 图形格式在终端中显示缩略图。-- Sk不久前&#xff0c;我们讨论了 Fim[1]&#xff0c;这是一个轻量级的命令行图像查看器应用程序&#xff0c;用于从命令行显示各种类型的图像&#xff0c;如 bmp、gif、jpeg 和 png…

混合App开发,HBuilder开发移动App

使用HBuilder开发混合App&#xff1a; Hbuilder&#xff1a;是一个在线打包工具&#xff0c;不需要在本地配置开发环境&#xff1b;直接将做好的网站&#xff0c;通过一些简单的操作&#xff0c;就能在线打包为一个App&#xff1b; 混合APP开发常见技术&#xff1a;Html5、Re…

fanuc roboguide_ROBOGUIDE软件:机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备&#xff0c;它能够将物料从一个工位自动传送到另一个工位&#xff0c;是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现&#xff0c;因此&#xff0c;对于具有输…

双电阻差分电流采样_小小的采样电阻,还真有点门道!

电流检测电阻的基本原理根据欧姆定律,当被测电流流过电阻时,电阻两端的电压与电流成正比.当1W的电阻通过的电流为几百毫安时,这种设计是没有问题的.然而如果电流达到10-20A,情况就完全不同,因为在电阻上损耗的功率(PI2xR)就不容忽视了.我们可以通过降低电阻阻值来降低功率损耗,…

jpa in查询_优选在shopee虾皮怎么发货价格查询皮皮虾云仓

优选在shopee虾皮怎么发货价格查询皮皮虾云仓皮皮虾云仓物流系统为现代化管理系统&#xff0c;可集中化&#xff0c;高效化的处理本土店物流订单。物流系统可对接主流的的电商平台ERP可以实现高效的订单处理。如lazada&#xff0c;shopee&#xff0c;1688、速卖通、eaby、shopi…

html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5、ReactNative、Weex、Ionic之间的区别&#xff1a; html5和Ionic&#xff1a; 在开发原理上基本相同&#xff0c;都是需要先开发出一个完整的网站&#xff0c;再通过html5或Ionic提供的打包技术对网站进行打包成移动app&#xff0c;它们实际还是一个网站&#xff0c;并非…