Bootstrap初识

xiaoxiao2021-02-28  133

目录:
    1.概述     2.bootstrap的优势     3.bootstrap包含的内容     4.b bootstrap的安装与引入     
1.概述
    bootstrap是一个由witter开源的基于HTML、CSS、JS的快速开发web网站的前端框架。
2.bootstrap的优势
 3.bootstrap包含的内容
  4.bootstrap的安装与引入
        bootstap的引入方式有4种:  1.直接下载预编译的文件;2.下载带LESS文件的源码自行编译(除非需要自定义,否则没必要); 3.采用CDN引入; 4.通过包管理工具比如NPM Composer Bower等下载Sass、js类型文件      1).直接下载预编译的文件(下载地址:http://getbootstrap.com/getting-started/#download) ps:还有通过Bower、NPM等包管理工具安装的形式,我就不扩展了。      下载好以后通过下面的代码引入即可:(引入路径即是文件在项目中的路径) <html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap引入</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="jquery/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="bootstrap/js/bootstrap.min.js"></script> </head>     编译less源码和采用包管理工具下载sass类型文件方式引入我们这里就不进行学习了,不是初识的范畴,我们直接来一个CDN引入的代码: <!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>     ps:当然还有别的CDN,你可以任意选择。          ps2: <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->       参考总结来自:http://www.runoob.com/bootstrap/bootstrap-intro.html
转载请注明原文地址: https://www.6miu.com/read-57807.html

最新回复(0)