Bootstrap基础入门(适合初学者) 缺乏、安全感 2022-05-30 11:16 413阅读 0赞 # Bootstrap基础入门 # **一、Bootstrap介绍** 1. 什么是bootstrap? * 简单,直观,强悍的前端开发框架,让web开发更迅速,简单。来自Twitter,是目前很受欢迎的前端框架之一。 * Bootstrap是基于HTML,CSS,Javascript的 2.特点 * 移动端设备优先:自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式 * 响应式设计:采用栅格布局(底层实现原理:媒体查询结合流体布局) * 偏UI,综合框架,包含一些常用的UI组件以及一些JS组件 3.Bootstrap的适用场景? * bootstrap适用于偏展示类的网站或者项目 4.Bootstrap的使用方法? * 资源网站:bootstrap中文网站:http://www.bootcss.com/ * 使用方法: ①环境搭建(依赖文件的引入)② 静态结构的满足③功能初始化 * 注意:bootstrap是基于jquery的!!! **二、Bootstrap栅格系统** 1. 容器 * 流体布局:container-fluid (百分百平铺整个页面) * 固定布局:container * 固定布局根据浏览器不同分辨率,固定尺寸不同,不同阈值对应的宽度如下: >=1200 width为1170px >=992 width为970px >=768 width为750px <768 为自适应宽度auto <div class="container-fluid div1"> 流体布局容器 </div> <div class="container div2"> 固定布局容器 </div> 运行结果: ![2018031115501023][] 2.什么是bootstrap栅格系统? * Bootstrap包含了一个响应式的,移动设备优先的,不固定的网格系统,可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的强大的混合类 * 表示行的class: row * 表示列的class: 注:("\*"可选:1-12之间的任意数字,其它无效) col-lg-\*:大型设备台式电脑(>=1200) col-md-\*:中型设备台式电脑(>=992) col-sm-\*:小型设备平板电脑(>=768) col-xs-\*:超小设备手机(<768) * 栅格系统的组合模式:在不同的屏幕下显示不同的排列方式 ![20180311160854393][] * 列偏移 col-\[\*\]-offset-\* 含义:表示在对应的屏幕分辨率下偏移多少个栅格 说明:\[\*\]可选:lg/md/sm/xs \*可选:1-12之间的任意数字(其它数字无效) ![20180311161303722][] 运行结果: ![20180311161427467][] 注:如果没有设置某阈值对应的网格大小,但是设置了该阈值对应的偏移量,则会通过偏移量自动的帮我们设置该阈值所占网格大小 例如: ![20180311161759461][] 则:默认为col-md-8 * 列排序 col-\[\*\]-push-\*:往后排多少个网格 col-\[\*\]-pull-\*: 往前排多少个网格 说明:\[\*\]可选:lg/md/sm/xs \*可选:1-12之间的任意数字(其它数字无效) 注:排序和偏移有什么区别? (1)offset偏移只能向右偏,排序既可以向右也可以向左。 (2)在有多列存在时,如果一行排不下的时候,offset会换行偏移,而排序会在一行显示 offset: ![20180311162736840][] ![20180311162748329][] push: ![20180311162827318][] ![20180311162837193][] * 嵌套 规则:嵌套的一行会按照它的父级重新分配网格(即按照其父级宽度进行12个网格平均分配) ![20180311163220488][] * 清浮动 说明:在需要清除浮动的元素前面添加一个空的div,给div添加类名clearfix <div class="row"> <div class="col-lg-6">col-lg-6col-lg-6col-lg-6col-lg-6col-lg-col-lg-6col-lg-6col-lg-6col-lg-6col-lg-col-lg-6col-lg-6col-lg-6col-lg-6col-lg-col-lg-6col-lg-6col-lg-6col-lg-6col-lg-col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="clearfix"></div>//清浮动 <div class="col-lg-3">col-lg-3</div> </div> 清除浮动前: ![20180311163727606][] 清除浮动后: ![20180311163743662][] **三、Bootstrap响应式实用工具** 1. 概念:针对不同设备显示或隐藏页面内容 2. 分类: (1)可见类 ①visible-\[\*\]-\* 说明:\[\*\]可选:lg / md / sm /xs 表示在对应的分辨率下显示 \*可选:block / inline / inline-block ②hidden-\[\*\] 说明:\[\*\]可选:lg / md / sm /xs 表示在对应的分辨率下隐藏 ![20180311164130446][] (2)打印类 ①visible-print-\* 在打印机可见,在浏览器隐藏 说明: \*可选:block / inline / inline-block ②hidden-print 在浏览器可见,在打印机隐藏 ![20180311164324350][] **四:Bootstrap字体图标(Glyphicons)** 1. 概念:字体图标是在Web项目中使用的图标字体 2. 使用字体图片的优点:①减少网页请求②样式容易控制,可以通过css直接设置样式 3. 原理 :使用font-face定义 (注:一定要找对文件路径) 4. 用法: 创建一个空标签,给该空标签添加一个基类和对应图标的类 说明: 基类 ( .glyphicon 例如:![20180311165025132][] 注意: ①图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在 ②最好使字体图标和文本内容分开,即使用空标签来做字体图标 今天就更新到这里了,拜拜~~~ [2018031115501023]: /images/20220530/09cacc6c7cb04016892053eca9904255.png [20180311160854393]: /images/20220530/4abc17ea2b3a4c679f8323d96b58c2ef.png [20180311161303722]: /images/20220530/168dc1bfde3c45cd950aa7604ef4face.png [20180311161427467]: /images/20220530/1aa21fa5350b41079baeb7e3ab44756b.png [20180311161759461]: /images/20220530/b0f66115a153476985cfbb9fab06f354.png [20180311162736840]: /images/20220530/19a615f295fb4dbca0323350a12941ce.png [20180311162748329]: /images/20220530/daf45f98386a46cf971f91b43ee3b55a.png [20180311162827318]: /images/20220530/d8591db93ea14a9abf87ab847bb2383e.png [20180311162837193]: /images/20220530/f9a03e3052de4891a935a925562cbed3.png [20180311163220488]: /images/20220530/3e85c80b16954e1a847f559d91edffa8.png [20180311163727606]: /images/20220530/f53c91c62bcc429e94157b084c45387e.png [20180311163743662]: /images/20220530/14623343e0ed49d1b3f4f90002e2bdfc.png [20180311164130446]: /images/20220530/ce95f7c150fd4a699bc85e0878697a16.png [20180311164324350]: /images/20220530/fa44451d95f64deaaedcbb95fd990dc9.png [20180311165025132]: /images/20220530/9b25870cede541779873afbb5d5a77ec.png
还没有评论,来说两句吧...