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. FinalShell安装

    Mac版安装路径/Applications/finalshelldata Linux版安装路径/usr/lib/finalshelldata 注意:1.FinalShell运行需要java或者jdk支 ...

  2. centos7下安装docker（17docker监控---docker自带监控命令）

    Docker自带的监控子命令 1.docker ps:docker ps -a这是我们常用的查看容器状态的命令 docker  container ls和docker ps的功能一样 2.docker ...

  3. centos7下安装docker（13.4容器volume总结）

    最近我们学习了docker 存储,首先docker存储有两种:storage driver和data volume. storage driver是由镜像层和容器层组成的,可以通过docker ins ...

  4. flask_sqlalchemy中根据聚合分组后的结果进行排序，根据日期（datetime）按天分组

    from sqlalchemy import func, desc # 根据聚合查询总收入,按总收入逆序 s= db.session.query(TpOrders.room_type_id, (fun ...

  5. Spring Security（七）：2.4 Getting Spring Security

    You can get hold of Spring Security in several ways. You can download a packaged distribution from t ...

  6. 洛谷题解 P1031 【均分纸牌】

    这道题很简单 原理是从左到右一个一个排,把差值m加起来加到后面一堆牌里 具体ac代码如下: #include<cstdio> #include<iostream> #inclu ...

  7. java中Set的用法

    Set集合的特点: 不能存储相同的元素. 同时因为其是一个抽象的接口:所以不能直接实例化一个set对象.(Set s = new Set() )错误 该接口主要继承于Collections接口,所以具 ...

  8. C语言中数组变量和指针变量

    指针变量为什么需要类型? 数组变量和指针变量在使用sizeof时不同,sizeof(数组变量)是数组长度,sizeof(指针变量)是存储int的字节长度4或者8(64bit). 数组变量在参数传递中, ...

  9. iOS开发之CoreImage

    CoreImage是iOS中的一个图像处理框架,提供了强大高效的图像处理功能,可以通过调用简单的API来使用框架所带的各种滤镜对图像进行处理. CoreImgae的三个重要组成部分:1.CIFiter ...

  10. android截屏

    截屏是一个常用的操作,经常会有这种需求. 截屏的工具类 package com.fxb.screenshot; import android.app.Activity; import android. ...