zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    手把手教你整Win10的Linux子系统(Ubuntu)
    Golang从入门到微服务
    GitHub总是打不开
    github无法push?看这篇文章就够了
    shell 操作mysql
    04 elasticsearch学习笔记-基本CRUD
    kibana-6.2.4-amd64的安装
    es 的reindex详解
    ruby 操作csv
    shell 去掉逗号_shell替换和去掉换行符
  • 原文地址:https://www.cnblogs.com/zhulina-917/p/10072442.html
Copyright © 2011-2022 走看看