1、首先要打开bootstrap的官网

点进去

2你会看到下面这样一个页面里面有很多组件

这里面的代码是实现组件功能的核心代码，还不能直接使用，要引入相关的js css

我们要在起步中下载相关的页面下载Bootstrap的代码，然后引入相应的js、css文件

以基本模板为例子，也可以在下载组件的核心代码粘贴到你新建的html文件中

这是我加入的下拉菜单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

   <%-- <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>--%>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

</head>

<body>

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

        Dropdown

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

        <li><a href="#">Action</a></li>

        <li><a href="#">Another action</a></li>

        <li><a href="#">Something else here</a></li>

        <li role="separator" class="divider"></li>

        <li><a href="#">Separated link</a></li>

    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</body>

</html>

　　

这是效果图

这是将下载后的Bootstrap中的css js front放到自己定义的文件后进行引用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

        Dropdown

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

        <li><a href="#">Action</a></li>

        <li><a href="#">Another action</a></li>

        <li><a href="#">Something else here</a></li>

        <li role="separator" class="divider"></li>

        <li><a href="#">Separated link</a></li>

    </ul>

</div>

<script src="js/jquery-1.10.1.js"></script>

<script src="js/bootstrap.js"></script>

</body>

</html>

　　

bootStrap的使用的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. Zookeeper的一致性

    转载:http://flyfoxs.iteye.com/blog/2121560 下面内容主要摘抄于<<Hadoop实战>>,红色高亮部分是本人添加的白话注释. Zookeep ...

  2. 缓存数据库Memcache

    为什么用缓存数据库 MySQL:将数据存储在磁盘上,数据写入读取相对较慢 Memcached:将数据存在内存中的数据库,数据读写都快,但是数据容易丢失 数据存储,数据仓库选择MySQL这种磁盘的数据库 ...

  3. 通过JS如何获取IP地址

    通过JS获取你真实的外网IP和内网IP,就算开代理也没有用,想想真是太可怕了,还能不能愉快的装逼了! 代码: //get the IP addresses associated with an acc ...

  4. 机器学习之MCMC算法

    1.MCMC概述 从名字我们可以看出,MCMC由两个MC组成,即蒙特卡罗方法(Monte Carlo Simulation,简称MC)和马尔科夫链(Markov Chain ,也简称MC).之前已经介 ...

  5. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  6. Java 中常见的数据结构

    1.数据结构有什么作用? 当使用 Java 里面的容器类时,你有没有想过,怎么 ArrayList 就像一个无限扩充的数组,也好像链表之类的.很好使用,这就是数据结构的用处,只不过你在不知不觉中使用了 ...

  7. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  8. Flask的蓝图和红图

    1.蓝图 对于简单的项目来说,比如项目就只有一个user模块,我们可以都将视图函数定义在一个文件里面,不需要用到蓝图. 但是如果我们的项目有多个模块,如下有v1模块,v2模块.....等,那么如果我们 ...

  9. Python_生成器函数进阶_39

    def generator(): print(123) content = yield 1 #content接收的是send传的值 print('=======',content) print(456 ...

  10. 如何实现用将富文本编辑器内容保存为txt文件并展示

    1.实现思路 创建一个xx.txt文件,存放于项目路径下 用文件流去读取文件内容并将读取的内容存放到页面的富文本编辑器框内 富文本编辑框内容改变后,保存时用文件流的方式保存到xx.txt文件中 提示: ...