bootStrap的使用

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、首先要打开bootstrap的官网

最新文章

热门文章