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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么在页面里引入bootstrap的css和js文件相关的知识,希望对你有一定的参考价值。

在页面里引入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>
    ......
参考技术A 从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>
参考技术B 通过路径关联相关的样式就可以了,具体写法:
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>
参考技术C

在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>

bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

实用方法

1.引入

  在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件

2. 按照bootstrap的表单组件  构建html代码 

  在表单中,若对某一字段想添加验证规则,默认需要以<div class=”form-group”></div>包裹(对应错误提示会根据该class值定位),内部<input class="form-control" />标签必须有name属性值,此值为验证匹配字段。

<form id="loginForm">
    <div class="form-group">
        <label for="username">管理员</label>
        <input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input name="password" type="password" class="form-control" id="password" placeholder="请输入密码">
    </div>
    <button type="reset" class="btn btn-default">重置</button>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

 

3.找到需要做校验的表单  初始化校验插件方法

$(‘#loginForm‘).bootstrapValidator({
        /*根据验证结果显示的各种图标*/
        feedbackIcons: {
            valid: ‘glyphicon glyphicon-ok‘,
            invalid: ‘glyphicon glyphicon-remove‘,
            validating: ‘glyphicon glyphicon-refresh‘
        },
        /*去校验表单元素  用户名  密码*/
        /*校验状态:未校验 NOT_VALIDATED 正在校验 VALIDATING  校验成功 VALID 校验失败 INVALID */
        /*校验规则:是需要去配置*/
        /* fields 字段 --->  表单内的元素*/
        fields:{
            /*指定需要校验的元素  通过name数据去指定*/
            username:{
                /*配置校验规则  规则不止一个*/
                validators:{
                    /*配置具体的规则*/
                    notEmpty:{
                        /*校验不成功的提示信息*/
                        message:‘请您输入用户名‘
                    },
                    /*自定义规则*/
                    callback:{
                        message:‘用户名错误‘
                    }
                }
            },
            password:{
                validators:{
                    notEmpty:{
                        message:‘请您输入密码‘
                    },
                    stringLength:{
                        min:6,
                        max:18,
                        message:‘密码6-18个字符‘
                    },
                    /*自定义规则*/
                    callback:{
                        message:‘密码错误‘
                    }
                }
            }
        }
        /*当校验失败  默认阻止了提交*/
        /*当校验成功  默认就提交了*/
        /*阻止默认的提交方式  改用ajax提交方式*/
    }).on(‘success.form.bv‘,function (e) {
        /*阻止浏览器默认行为*/
        e.preventDefault();
        var $form = $(e.target);
        /*发登录请求*/
        $.ajax({
            type:‘post‘,
            url:‘/employee/employeeLogin‘,
            /*可传递的数据格式  对象  序列化后的数据  key=value的字符串  [{name:‘‘,value},...] */
            data:$form.serialize(),
            dataType:‘json‘,
            success:function (data) {
                /*响应成功后的逻辑*/
                if(data.success){
                    location.href = ‘/admin/index.html‘;
                }else{
                    if(data.error == 1000){
                        /*调用校验插件  让该选项置为 校验失败状态 提示校验失败的信息*/
                        /*updateStatus(‘哪个元素’,‘修改为什么状态’,‘校验规则’)*/
                        $form.data(‘bootstrapValidator‘).updateStatus(‘username‘,‘INVALID‘,‘callback‘)
                    }else if(data.error == 1001){
                        $form.data(‘bootstrapValidator‘).updateStatus(‘password‘,‘INVALID‘,‘callback‘)
                    }
                }
            }
        });
    });

 

以上是关于怎么在页面里引入bootstrap的css和js文件的主要内容,如果未能解决你的问题,请参考以下文章

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

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

在vue.js里引入bootstrap.css文件报错怎么办

为啥bootstrap.css无法引入

bootstrap框架怎么在html页面加载使用

怎么一进页面就加载bootstrap table