Bootstrap初识

来源：互联网发布：淘宝网建达巧克力编辑：程序博客网时间：2024/06/08 11:27

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

阅读全文

0 0

Bootstrap初识

目录：

1.概述

2.bootstrap的优势

3.bootstrap包含的内容

4.bootstrap的安装与引入