引导学习笔记 - 行业资讯 - 肥雀云_南京肥雀信息技术有限公司

<强>一、引导是什么

引导是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面,它是后端程序员的福音,使他们只需要专注业务逻辑,而无须浪费太多的精力在界面设计上。

<强>全响应

它可以开发全响应式网页,不论你使用手机,平板电脑,普通个人电脑浏览网站内容,所有的元素都可以很优雅的呈现,减轻了因为兼容性而带来的工作量。

二,下载

如果你想把引导文件放在项目中供本地使用,那么首先你要下载它,那么在哪可以下载到引导文件呢?

<强>下载完整版

你可以登陆http://v3.bootcss.com点击页面中的下载引导按钮下载完整版。

三、使用引导文件

在使用引导是你可以根据自己的生产环境来进行选择,既可以将引导下载到本地进行引用也可以使用引导CDN来进行引用。

<强> 1,将引导文件下载到本地使用

<强>(1)首先把它的文件按照类别放在项目的文件夹中

你可以把CSS文件—— bootstrap.min.css 放在类似样式表这样专门放CSS的文件夹。把js文件—— bootstrap.min.js 放在类似脚本文件夹中。

<强>(2)。在页面中使用引导

将引导的文件 bootstrap.min.css , bootstrap.min.js 引入当前页面中,由于引导是基于Jquery的,所以在引入它的js文件之前,一定要先引入 Jquery。js 。注意:这里考虑到文件大小,我们引入了 min 版的文件,当然,你也可以引入完整版的文件。

示例代码如下:

& lt; !——, Bootstrap 核心,CSS 文件,——比; 　　& lt; link rel="样式表",href=" https://www.yisu.com/stylesheets/bootstrap.min.css "祝辞, 　　& lt; !——, jQuery文件,——比; 　　& lt; script src=" https://www.yisu.com/scripts/jquery.min.js "祝辞& lt;/script>, 　　& lt; !——, Bootstrap 核心,JavaScript 文件,——比; 　　& lt; script src=" https://www.yisu.com/scripts/bootstrap.min.js "祝辞& lt;/script>

<强> 2,使用引导CDN进行引用

& lt; !——,新,Bootstrap 核心,CSS 文件,——比; 　　& lt; link rel="样式表",href=" https://www.yisu.com//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css "比; 　　& lt; !——,可选的引导主题文件(一般不用引入),——比; 　　& lt; link rel="样式表",href=" https://www.yisu.com//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css "比; 　　& lt; !——, jQuery文件。务必在bootstrap.min.js 之前引入,——比; 　　& lt; script src=" https://www.yisu.com//cdn.bootcss.com/jquery/1.11.3/jquery.min.js "祝辞& lt;/script> 　　& lt; !——,最新的,Bootstrap 核心,JavaScript 文件,——比; 　　& lt; script src=" https://www.yisu.com//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js "祝辞& lt;/script>

<强>四、引导屏幕分类

引导是一种全响应的技术,那么针对不同的屏幕,它是怎么提供支持的呢? 　　别担心,针对不同的显示屏幕尺寸,引导提供了不同的栅格布局的属性:

<李>

col-xs - *超小屏幕手机(& lt; 768 px)

<李>

col-sm - *小屏幕平板(≥768 px)

<李>

col-md - *中等屏幕桌面显示器(≥992 px)

<李>

col-lg - *大屏幕大桌面显示器(≥1200 px)

在写栅格布局的页面时div的类是这样子的:

& lt; div类=癱ontainer-fluid”在
,,,,类,& lt; div="行"在
,,,,,,类,& lt; div=" col-md-8 col-xs-6”祝辞div1