药监局网站建设方案,重庆有那些公司,便民网app下载,元谋县住房和城乡建设局网站目录
初识Bootstrap
Bootstrap的使用
响应式开发 初识Bootstrap
Bootstrap来自 Twitter (推特)#xff0c;是一个 CSS 框架#xff0c;是目前最受欢迎的前端框架#xff0c;可以更轻松地创建网站和 Web 应用程序用户界面。Bootstrap是基于HTML、CSS和JAVASCRIPT的#…目录
初识Bootstrap
Bootstrap的使用
响应式开发 初识Bootstrap
Bootstrap来自 Twitter (推特)是一个 CSS 框架是目前最受欢迎的前端框架可以更轻松地创建网站和 Web 应用程序用户界面。Bootstrap是基于HTML、CSS和JAVASCRIPT的它简洁灵活使得Web开发更加快捷。其下载链接如下 中文官网 Bootstrap中文网 官网 Bootstrap · The most popular HTML, CSS, and JS library in the world. 推荐使用Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 框架顾名思义就是一套架构它有一套比较完整的网页功能解决方案而且控制权在框架本身有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。 Bootstrap优点 标准化的htmlcss编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈不断的更新迭代 让开发更简单提高了开发的效率 Bootstrap的版本区别 2.x.x 停止维护兼容性好代码不够简洁功能不够完善。 3.x.x 目前使用的人很多稳定但是放弃了IE6-IE7。对IE8支持但是界面效果不好偏向于开发响应式布局、移动设备优先的WEB项目。 4.x.x 与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。放弃了对 IE8 以及 iOS 6 的支持现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。 5.x.x Bootstrap5 是 Bootstrap 的最新版本使用了新组件、更快的样式表以及拥有更快的响应能力。支持所有主要的最新稳定版本浏览器但不支持 Internet Explorer 11 及以下版本。和 Bootstrap 3 4 的主要区别在于 Bootstrap5 不再依赖 jQuery使用了原生的JavaScript当然我们如果要想用也可以引入jQuery. Bootstrap的使用
根据上文我们简单的了解到了Bootstrap是一个CSS框架那现在我们就对其进行下载并使用
打开Bootstrap中文官网选择自己想使用的相应版本进行下载 以Bootstrap5进行举例这里我们先选择生产版本进行下载使用 下载Bootstrap有三种方式 用于生产环境的 Bootstrap编译并压缩后的 CSS. JavaScrip 和字体文件。不包含文档和源码文件。 Bootstrap 源码Less、JavaScript 和字体文件的源码并且带有文档。需要 Less 编译器和一些设置工作。 Sass这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Ralls. Compass 或只针对 Sass 的项目中引入。 这里我们就简单介绍一下第一种方法下载生产文件 下载完生产文件你会得到一个压缩包里面的文件就是我们要使用的Bootstrap文件 总结1、创建文件夹结构2、创建html骨架文件3、引入相关样式文件4、书写内容 官网给我们一个基本的HTML创建模板的实例如下 我们这里就简单借用一下相关内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询media queries功能 --!-- 警告通过 file:// 协议就是直接将 html 页面拖拽到浏览器中访问页面时 Respond.js 不起作用 --!--[if lt IE 9]script srchttps://cdn.jsdelivr.cn/npm/html5shiv3.7.3/dist/html5shiv.min.js/scriptscript srchttps://cdn.jsdelivr.cn/npm/respond.js1.4.2/dest/respond.min.js/script![endif]--!-- 引入 bootstrap 的样式文件 --link relstylesheet href/Bootstrap//Bootstrap//bootstrap-3.4.1-dist//css/bootstrap.min.css
/head
body引入Bootstrap样式自动清除内外边距
/body
/html 响应式开发
根据上文讲解到Bootstrap3版本偏向于开发响应式布局那什么是响应式布局呢现在讲解一下
响应式开发就是使用媒体查询针对不同的设备进行布局和样式的设置从而适配不同设备的目的。
设备划分尺寸区间超小屏幕手机 768px小屏设备平板 768px ~ 992px中等屏幕桌面显示器 992px ~ 1200px宽屏设备大桌面显示器 1200px
响应式需要一个父级做为布局容器来配合子级元素来实现变化效果。原理就是在不同屏幕下通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小从而实现不同屏幕下看到不同的页面布局和样式变化。案例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {height: 200px;background-color: #008c8c;margin: 0 auto;}/* 超小屏幕 小于 768 布局容器宽度为 100% */media screen and (max-width:767px) {.container {width: 100%;} }/* 小屏幕下 大于等于 768 布局容器改为 750px */media screen and (min-width:768px) {.container { width: 750px;}}/* 中等屏幕下 大于等于 992px 布局容器修改为 970px */media screen and (min-width:992px) {.container {width: 970px;}}/* 大屏幕下 大于等于1200 布局容器修改为 1170px */media screen and (min-width:1200px) {.container {width: 1170px;}}/style
/head
bodydiv classcontainer/div
/body
/html
