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,一经查实,立即删除!

相关文章

JavaScript和jQuery的学习

还有12天就要回学校了&#xff0c;我的假期计划还能实现吗&#xff1f;在这12天里&#xff0c;需要把JavaScript和jQuery学完。我知道这两个技术对于前端网页开发非常重要。前期把HTML和CSS学完了&#xff0c;学的不是特别深&#xff0c;只是简单的过一下&#xff0c;自认为HTM…

bootstrap中语义化标签、字体风格、文本布局、列表排列、特殊字体颜色及特殊背景颜色

语义化标签&#xff1a; bootstrap中提供一些语义化标签&#xff0c;它们自带样式&#xff0c;这里介绍几个样式比较明显的语义化标签&#xff1a; <!-- 1.bootstrap中mark标签定义一个有淡黄色背景的文本 --> <p><mark>hello</mark></p><!…

asp.net使用MVC4框架基于NPOI做导出数据到Excel表

NPOI 是 POI 项目的 .NET 版本。POI是一个开源的Java读写Excel、WORD等微软OLE2组件文档的项目。 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写。NPOI是构建在POI 3.x版本之上的&#xff0c;它可以在没有安装Office的情况下对Word/Exc…

bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

表格&#xff1a; bootstrap中用类定义了几个风格的表格&#xff0c;使用时给table标签加上类名即可&#xff0c;具体如下&#xff1a; 类名描述.table基础表格&#xff1a;标题加粗&#xff0c;只有水平的淡灰色边框线条&#xff0c;没有垂直方向的线条.table-striped条纹表…

系统数据监控

系统数据监控。 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading; using Arch.CFramework.CLoggingAdapter; using Ctrip.Mobile.AppDownload.Utility;namespace Ctrip.Mobile.AppD…

bootstrap中单个按钮、按钮组、徽章、进度条

单按钮&#xff1a; 背景按钮&#xff1a;bootstrap提供了具有特殊意义背景的按钮样式&#xff0c;使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可&#xff0c;其具体如下&#xff1a; 类名描述.btn基本按钮&#xff1a;灰色、有高度、宽度自适应、没有…

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;我们一步步来&…

bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

分页&#xff1a; 分页功能是当遇到数据很多时&#xff0c;如果都放到一个页面上&#xff0c;那么找起来很不方便&#xff0c;而且不利于性能。此时采用分页功能就能很好的优化用户体验&#xff0c;可是如果自己开发分页功能&#xff0c;那么就会影响开发效率&#xff0c;boot…

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

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

bootstrap中导航、导航栏、表单及自定义表单

导航&#xff1a; bootstrap中使用列表封装了水平导航&#xff0c;其类样式如&#xff1a; 类名描述.nav给ul或ol&#xff0c;用于清除列表默认样式&#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…

Haproxy安装及配置(转)

1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.tar.gz # cd haproxy-1.3.20 # make TARGETlinux26 PREFIX/usr/local/haproxy #将haproxy安装到/usr/local/haproxy # make install P…

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

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

hive 常用UDF

Hive UDF整理(可以直接在mysql上测试&#xff0c;hive中没有伪表&#xff0c;需要手动创建&#xff0c;反应慢)字符串函数字符串长度函数&#xff1a;length 语法: length(string A)返回值: int说明&#xff1a;返回字符串A的长度举例&#xff1a;hive> select length(‘abc…

摄影网站收集

图虫网 http://tuchong.com/tags/%E9%95%BF%E6%B2%99/?orderweekly&page2 转载于:https://www.cnblogs.com/PS-apple/p/3902533.html

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

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

node中模块系统及核心模块、执行node文件

node中模块系统&#xff1a; 1.模块系统&#xff1a;核心模块、第三方模块、 自己写的模块。 2.网页中所有的路径都是URL&#xff0c;而不是文件路径。 3.node偏底层开发&#xff0c;开启的服务器完全是一个黑盒子&#xff0c;所有的资源默认都是不能被用户访问的&#xff0…

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

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

node中模板引擎、模块导出、package.json简介

在node.js中使用引擎模板&#xff1a; art-template不仅在浏览器可以使用&#xff0c;也可以在node中使用&#xff0c;并且模板引擎起早诞生于服务器领域&#xff0c;在node中使用模板引擎&#xff1a; 1.安装&#xff1a;在一个文件目录下执行命令&#xff1a;npm install a…

富爸爸穷爸爸

推荐大家看看&#xff0c;虽然我只看了第一章&#xff0c;但是我觉得写的确实挺好的&#xff0c;也确实符合这个社会规律。 老实本分的工作已经是过去式了。为自己工作才是出路。转载于:https://www.cnblogs.com/joysky/p/3909127.html

Java和C++在细节上的差异(转)

Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别: 一、基本程序设计结构&#xff1a; Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别&#xff1a; 1. Java的原始数值型数据类型中不包含无符号类型&…