<!DOCTYPE html>
<html lang="en">
<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>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><!--导入jqeury-->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>Title</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</body>
</html>
                        bootstrap使用使用方法一www.bootcss.com中文网下载复制里面的3个文件放入工程里记得在官网复制起步代码 <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!--移动设备优先 自适应-->引入boot的CSS文件 <link rel="stylesheet" href="css/bootstrap.min.css"> 引入jquery包 <script src="js/jquery-1.7.2.js"></script> 引入boot的jquery <script src="js/bootstrap.min.js"></script>

 使用方法二直接复制起步代码放入html<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!--移动设备优先--><title>bootstrap</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

①bootstrap引入的更多相关文章

  1. bootstrap引入

    方法一:        注意:引入js时需先引入jQuery        1.在bootstrap中文网上下载源码,解压到路径  (<E:\Lern\bootstrap>)      2 ...

  2. bootstrap引入文件方法

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. npm教程_脚手架原理以及bootstrap引入

    格式:vue init <templateName> <ProjectName> 例子:vue init webpack vue02 运行上面的命令后,脚手架帮忙按照webpa ...

  4. Bootstrap 引入文件顺序及IE兼容性js

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. bootstrap标签引入地址

    http://www.bootcdn.cn/bootstrap/ <link rel="stylesheet" href="http://apps.bdimg.co ...

  6. vuejs 使用vue-cli引入bootstrap

    前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...

  7. vue中全局引入bootstrap.css

    1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...

  8. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  9. VUE引入jq bootstrap 之终极解决方案（测试）

    初入VUE遇见的一些问题,在网上找了些方法,再根据自己的实际项目解决的问题写得此文,,希望对你有所帮助. vue-cli快速构建项目以及引入boostrap.jq各种插件配置 vue-cli脚手架工具 ...

随机推荐

  1. 在Pycharm中使用jupyter笔记本

    在Pycharm中使用jupyter笔记本 我在Pycharm中使用jupyter笔记本,发现新的Jupyter更新中,增加了令牌. 随着创建的虚拟环境启动的所有设置,并将URL设置为127.0.0. ...

  2. php中常用的字符串大小写转换函数实例解释

    PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. strtolower函数.strtoupper函 ...

  3. java递归的应用和实例

    使用计算机计算组合数: 1.使用组合数公式利用n!来计算 设计思想 (1)首先解决求n!的函数 (2)再结合组合数公式,求组合数 程序流程图 源程序代码 package Zuote; import j ...

  4. Javascript/Jquery操作数组，增删改查以及动态创建HTML元素

    <html> <head> <title> New Document </title> <script src="~/Scripts/j ...

  5. 数据库表反向生成(一) MyBatis-generator与IDEA的集成

    在Dao层,通过数据库表反向生成,可以节省我们很多的精力,把更多的精力投入复杂的业务中. 数据库表反向生成,指的是通过数据库如mysql中的库表schema生成dao层读写表的基础代码,包括model ...

  6. ConcurrentHashMap源码及分析

    ConcurrentHashMap是在jdk1.5版本开始,存在于java.util.concurrent包下.本文主要是针对jdk1.7版本. 由于HashMap是非线程安全的,HashTable虽 ...

  7. RobotFramework自动化测试框架-移动手机自动化测试Click Element At Coordinates关键字的使用

    Click Element At Coordinates关键字通过一个具体的坐标点,来模拟点击一个Element,该关键字接收两个参数[ coordinate_X | coordinate_Y ]. ...

  8. 关于java的自动拆装箱若干细节问题

    一.首先需要了解的几个前提: 1.自动装箱过程是通过调用valueOf方法实现的(如Integer.valueOf(10)),而拆箱过程是通过调用包装器的 xxxValue方法实现的(如Integer ...

  9. php 变量 循环关键词以及方法

    <?php/* 多行注释 */常用数据类型int string double/float bool变量的定义$a = 123;$b = "123";$c = '456';$d ...

  10. 张高兴的 UWP 开发笔记：应用内启动应用 (UWP Launch UWP)

    需求:在 A 应用内启动 B 应用,如果 B 应用未安装则跳转应用商店搜索. 启动方式使用 Uri 启动,本文使用尽可能简单,并且能拿来直接用的代码.不涉及启动后的应用数据交互,如需深入了解,请戳 M ...