Bootstrap引入配置

Bootstrap环境搭建

    • Bootstrap介绍
    • Bootstrap环境详细配置
      • 1.静态文件配置
        • 下载地址
        • 下载步骤
        • 配置
      • 2.在线方式
        • 引用网址
        • 配置方式

Bootstrap介绍

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking
News都使用了该项目

Bootstrap环境详细配置

BootStrap环境配置分为两种方式。

  • 一种是将Bootstrap文件包下载,在开发的Web页面中导入
  • 另一种方式是使用CDN在线方式,避免将Bootstrap文件包下载到本地。

1.静态文件配置

下载地址

中文地址:https://www.bootcss.com/

下载步骤

1.点击【Bootstrap3中文文档v3.3.7】

2.点击【下载Bootstrap】
Bootstrap引入配置_第1张图片
3.进入下一个页面,下滑到如下位置,下载用于生产环境的Bootstrap
Bootstrap引入配置_第2张图片
4.将压缩包放到指定位置,解压。目录结构如下所示
Bootstrap目录结构
Bootstrap引入配置_第3张图片

      css文件:css样式文件,包括css核心文件和主题文件
      js文件:javascript文件,包括javascript核心文件
      fonts文件:图标字体,主要是css样式文件中的主题文件会引用到的字体图标

配置


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demotitle>
	
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    
    
    
head>
<body>
    
    <script src="bootstrap/js/jquery.min.js">script>
    
    <script src="bootstrap/js/bootstrap.min.js">script>
body>
html>

2.在线方式

        在线方式使用CDN技术,CDN是Content Delivery Network的缩写,简单的说就是Bootstrap把自己的css、Js等文件托管到某一个网络服务器上使用时调用。
注意:CDN方式要保证网络畅通

引用网址

https://www.bootcdn.cn/twitter-bootstrap/

配置方式


<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demotitle>

    
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
    

  head>
  <body>
    
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>  
    
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
  body>
html>

你可能感兴趣的:(前端开发,框架,javascript,css,html,html5,jquery)