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. Python3爬虫 利用百度地图api得到城市经纬度

    有2种方式,第一种是利用urllib , 方法1:利用urllib , 先把url 转成urlcode,然后读取网页,读到网页再用json读取内容,比较麻烦. 可以在浏览器输入,看一下格式. http ...

  2. springboot设置session超时和session监听

    2.0版本以下设置session超时时间 1.  springboot 2.0版本以下配置session超时 1.1 application.properties配置文件: spring.sessio ...

  3. P2370 yyy2015c01的U盘（二分+背包）

    思路:先说一下题意吧.就是给你n个文件大小为v,价值为c, 但是硬盘的大小为S, 而且要存的总价值大于等于p.问每次传输k大小的文件.问k的最大值是多少? 我们以k为二分对象. 直接讲检验函数吧. 假 ...

  4. ssm框架的整合搭建（二）

    maven简单项目的创建前面已经完成了,下面开始依赖包和配置文件的编写 好好努力每一天!!!!!! 项目结构看这里 1.首先,依赖包pom.xml <project xmlns="ht ...

  5. 在linux中查看进程占用的端口号

    在Linux 上的 /etc/services 文件可以查看到更多关于保留端口的信息. 可以使用以下六种方法查看端口信息. ss:可以用于转储套接字统计信息. netstat:可以显示打开的套接字列表 ...

  6. Python 的几个命令行参数

    1) 以 $ python 方式启动 python 解释器,之后 import 一个模块,将生成 .pyc 文件. 2) 以 $ python -O 方式启动 python 解释器,之后 import ...

  7. 在.NET中调用Java的类

    .NET不能直接调用Java的类,但IKVM.NET解决了这个问题. IKVM.NET提供了两种方式调用java的类: ①把生成的jar包放置在程序根目录,然后通过创建URL实例的方式去调用类中的方法 ...

  8. oracle 删除表空间TABLESPACE步骤及注意项

    告诉大家,我喜欢通过toad for oralce来实现对oracle数据库的操作. 1.首先通过数据库管理员用户以SYSDBA身份登录.比如使用sys用户去登录 2.查看和记录待删除表空间所在的物理 ...

  9. Android so注入(inject)和Hook技术学习（三）——Got表hook之导出表hook

    前文介绍了导入表hook,现在来说下导出表的hook.导出表的hook的流程如下.1.获取动态库基值 void* get_module_base(pid_t pid, const char* modu ...

  10. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...