怎么在页面里引入bootstrap的css和js文件

 我来答
前沿科技百科
2017-03-25 · 知道合伙人软件行家
前沿科技百科
知道合伙人软件行家
采纳数:27 获赞数:67
web前端高级工程师

向TA提问 私信TA
展开全部

在页面里引入bootstrap的css和js文件在方法有两种

  • 第一种方去

    用代理引用的方法,不用下载文件,直接在头部写引入代码。

    <!doctype html>
    <html>
    <head>
      <meta name="renderer" content="webkit|ie-comp|ie-stand">
      <meta charset="utf-8">
      <title>2B前端</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
      <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    ......
  • 第二种方法

    就是下载本地引用的方法    

    1. 到http://v3.bootcss.com/getting-started/#download下载文件

    2 把下载的文件进行引用

    <!doctype html>
    <html>
    <head>
      <meta name="renderer" content="webkit|ie-comp|ie-stand">
      <meta charset="utf-8">
      <title>2B前端</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link href="/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <script src="/jquery/3.0.0/jquery.min.js"></script>
      <script src="/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    ......
bj_380138540
2016-11-24 · 知道合伙人软件行家
bj_380138540
知道合伙人软件行家
采纳数:55 获赞数:117

向TA提问 私信TA
展开全部
从bootstrap网站下载框架文件,拷贝到项目的public文件夹中,如下代码使用:
<!DOCTYPE html>
<html>
<head>
<!--头文件其他的部分-->
href="public/bootstrap/css/bootstrap.min.css" />
</head>
<body >
<!--html文件主体-->
<!--引入jquery-->
<script src="public/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!--引入其他的js文件-->
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友d25c6f3
2016-12-17 · 知道合伙人软件行家
百度网友d25c6f3
知道合伙人软件行家
采纳数:54 获赞数:280
邢帅教育班主任任职,累计服务了几千名学员,大家想在这里学习可以加我QQ 2824116625 学习群497187010

向TA提问 私信TA
展开全部
通过路径关联相关的样式就可以了,具体写法:
css 样式 ----》
<link type="type/css" href="../css/bootstrap-responsive.min.css" rel="stylesheet">
js文件------》
<script src="../js/bootstrap.min.js"></script>
这个是吧bootstrap 文件下载到本地的情况下,css 通过link标记 href 找到路径链接;
js文件 通过script 双标记 通过scr 找到他的路径 链接。如果不想下载到本地也可以使用网络路径链接。
注意:boottrap 是完全依赖于Jquery,所以你要排在最前面引入Jquery文件:

<script src="../jquery/3.0.0/jquery.min.js"></script>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
神心无17
2016-12-24 · 知道合伙人软件行家
神心无17
知道合伙人软件行家
采纳数:213 获赞数:535

向TA提问 私信TA
展开全部

在HTML中按如下引用css和JS 文件 即可:



下方为代码部分,请参考:

<head>    
 <meta charset="UTF-8">    
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
 <meta name="renderer" content="webkit">    
 <meta name="viewport" content="width=device-width, initial-scale=1">    
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
 <meta http-equiv="Cache-Control" content="no-transform" />     
 <meta http-equiv="Cache-Control" content="no-siteapp" />    
 <meta name="applicable-device" content="pc,mobile">    
 <meta name="author" content="建站堂;http://www.wangzhan18.com/">    
 <meta name="keywords" content="厦门网站建设公司,微信公众号建设,企业做网站方案,产品展示网站设计">    
 <meta name="description" content="厦门网站建设公司推荐最实惠建站方案,中小型企业2017公司微信公众号建设及宣传网站制作,行业产品展示手机网站页面设计.做官方网站,让用户通过互联网找到你的产品...建站堂">    
 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">    
 <link rel="apple-touch-icon" href="/favicon.png">    
 <title>厦门企业网站制作_微信公众号建设_公司做手机网站_建站堂</title>    
 <!-- 新 Bootstrap 核心 CSS 文件 -->    
<link rel="stylesheet" href="/templets/default/style/bootstrap.min.css">    
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    
<script src="/templets/default/js/jquery.min.js"></script>    
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    
<script src="/templets/default/js/bootstrap.js"></script>    
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>    
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
</head>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式