门户网站的三个基本特征,做网站设计管理需要什么知识,做网站没有按照合同履行,嘉兴网站搭建文章目录概念入门响应式布局响应式布局的实现#xff08;栅格系统#xff09;示例代码注意事项栅格系统参考视频应用 Bootstrap 的组件概念
一个前端开发的框架#xff0c;Bootstrap#xff0c;来自Twitter#xff0c; 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、…
文章目录概念入门响应式布局响应式布局的实现栅格系统示例代码注意事项栅格系统参考视频应用 Bootstrap 的组件概念
一个前端开发的框架Bootstrap来自Twitter 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、 CSS、 JavaScript 的它简洁灵活使得Web开发更加快捷。
框架 一个半成品软件开发人员可以在框架基础上再进行开发简化编码。
好处 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2.响应式布局。同一套页面可以兼容不同分辨率的设备。
入门
1.下载 Bootstrap地址https://v3.bootcss.com/getting-started/ 2.下载的压缩包解压后将里面的三个文件夹复制到项目中 3.创建 html 文件可以使用 Bootstrap 的基本模板
!doctype html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --titleBootstrap 101 Template/title!-- Bootstrap --link relstylesheet hrefhttps//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css integritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询media queries功能 --!-- 警告通过 file// 协议就是直接将 html 页面拖拽到浏览器中访问页面时 Respond.js 不起作用 --!--[if lt IE 9]script srchttps//cdn.jsdelivr.net/npm/html5shiv3.7.3/dist/html5shiv.min.js/scriptscript srchttps//cdn.jsdelivr.net/npm/respond.js1.4.2/dest/respond.min.js/script![endif]--/headbodyh1你好世界/h1!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边) --script srchttps//cdn.jsdelivr.net/npm/jquery1.12.4/dist/jquery.min.js integritysha384-nvAa06Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ crossoriginanonymous/script!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --script srchttps//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js integritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd crossoriginanonymous/script/body
/html响应式布局
依赖于栅格系统实现将一行平均分成 12 个格子不论什么屏幕每行都有12个格子可以指定元素占几个格子。 例如一个 div 元素在 pc 端占 4 个格子在手机的则占 12 个格子。
响应式布局的实现栅格系统
1.定义容器。类似 table 元素
容器分类 1.1.container 固定宽度显示 如上图所示container 容器在屏幕的的宽度 ≥576px 时都是有固定的显示宽度的例如在 Medium 设备中固定显示的宽度就是 720px在 Extra small 设备中则 100% 宽度显示即占满设备屏幕的整个宽度。
1.2.container-fluid 100%宽度即占满整个屏幕的宽度
将容器元素的 class 属性设为 container 或者 container-fluid。
点击查看关于容器的详细说明。
2.定义行。相当于 tr 元素
将行元素的 class 属性的值设为 row
3.定义元素。指定行内的元素在不同的设备上所占的格子数目。
格式col-设备代号-格子数目即将元素的 class 属性的值设为col-设备代号-格子数目
设备代号 1xs 超小屏幕手机(768px) 手机 2sm小屏幕平板(2768px)平板 3md中等屏幕桌面显示器(≥992px)笔记本 4lg大屏幕大桌面显示器(21200px)台式电脑
按如上的设备代号你要设置元素在手机端的布局可以这样定义元素的 class 属性值col-xs-12表示元素在手机端的屏幕中占12个格子而每行总共就12个格子所以相当于该元素在手机端占满整行。
示例代码
!doctype html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --titleBootstrap 101 Template/title!-- Bootstrap --link relstylesheet hrefcss/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边) --script srcjs/jquery-3.5.1.min.jsintegritysha384-nvAa06Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZcrossoriginanonymous/script!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --script srcjs/bootstrap.min.jsintegritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHdcrossoriginanonymous/scriptstyle.tel {border: 1px solid red;}/style
/head
body
!--定义容器--
div classcontainer!--定义行--div classrow!--定义元素在大屏幕占3个格子在手机端占12个格子--div classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/divdiv classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/divdiv classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/divdiv classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/divdiv classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/divdiv classcol-md-3 col-lg-3 col-xs-12 tel显示的元素/div/div
/div/body
/html上述代码执行后的效果如下所示 注意事项
1.在小设备设置的栅格属性在大设备可以兼容在大设备设置的栅格属性在小设备无法兼容 例如你把元素的 class 属性设置为 col-xs-4表示元素在显示的时候占4列那么在 sm、md、lg等设备显示时也是占4列如果你把元素的栅格属性设为 col-lg-4那么在宽度小于 992pxlg设备最小宽度是992px的设备显示时就不是占4列了而是占12列。
栅格系统参考视频
视频1 https://live.csdn.net/v/182157 视频2 https://live.csdn.net/v/182158
应用 Bootstrap 的组件
其实就是 Bootstrap 框架已经做好的一些页面组件元素你只要复制代码到你的网页上使用即可。
例如使用按钮组件你打开 Bootstrap 中文文档在左侧找到组件 -- 按钮然后在右侧复制代码粘贴到你自己开发的网页上即可。
