bootstrap快速入门

最新推荐文章于 2024-03-20 09:35:53 发布
最新推荐文章于 2024-03-20 09:35:53 发布
阅读量363 收藏 1
点赞数 1
文章标签： bootstrap javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53311560/article/details/125783578
版权

bootstrap

导入bootstrap

导入指定的文件，之前先把文件进行下载

将bootstrap文件中的dist目录copy当项目目录中即可

文件目录

  1. 将 jQuery.js 放入我们的 js目录下

    • 因为 jQuery.js 并不属于 Bootstrap，所以我们放在 js 目录下
      在这里插入图片描述
  <meta charset="utf-8" />
    <title>Document</title>
    <!-- 引入Bootstrap 的核心CSS文件 -->
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <!-- 引入jquery的核心js文件,需要在bootstrap的js之前引入 -->
    <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入Bootstrap 的核心js文件 -->
    <script src="dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

注意：

  • 如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js

栅格网格系统

<div class="container">
    <div class="row">
        <div class="col-md-5" style="background: #761c19">你好</div>
    </div>
    <div class="row">
        <div class="col-md-4" style="background: #761c19">我是</div>
        <div class="col-md-4 col-md-offset-2" style="background: #761c19;color:royalblue">我是</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-sm-6" style="background: #761c19">我是</div>
        <div class="col-md-4 col-sm-6" style="background: #761c19;color:royalblue">我是</div>
        <div class="col-md-4 col-sm-6" style="background: #761c19;color:royalblue">niaho</div>
    </div>
</div>

结果图

常用的基本样式

<%-- 常用效果
    1.标题
        对h1到h6的效果进行覆盖
        提供了对应的类名，为非标体元素设置样式.h1~.h6
    2.段落
        通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。
        <small> ：小号字
        <b><strong>：加粗
        <i><em>: 斜体
    3.强调
        定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：
        .text-muted： 提示，使用浅灰色(#999)
        .text.primary ：主要，使用蓝色(#428bca)
        .text-success：成功，使用浅绿色(#3c763d)
        .text-info：通知信息，使用浅蓝色(#31708f)
        text-warning：警告，使用黄色(#8a6d3n)
        text-danger：危险，使用褐色(#a94442)

    4.对齐
    在CSS中常常使用text-align 来实现文本的对齐风格的设置。
        left   左对齐
        right  右对齐
        center 居中对齐
        justify    两端对齐
    Bootstrap 中通过定义四个类名来控制文本的对齐风格
        text-left  左对齐
        text-right 右对齐
        text-center    居中对齐
        text-justify   两端对齐 --%>

实例演示：

<h1>标题1<small>副标题</small></h1>
<h2>标题2<span class="small">副标题</span></h2>
<h3>标题3</h3>
<hr>
<p class="lead">通过.lead 来突出强调内容(其作用就是增大文本字号，<small>加粗文本</small>，而且对<b>行高</b>和<strong>margin</strong>也
    <i>做相应</i>的处理)。可以使用以下<em>标签</em>给文本做突出样式处理。</p>
<hr>
<div class="text-muted">.text-muted： 提示，使用浅灰色(#999)</div>
<div class="text-primary">.text.primary ：主要，使用蓝色(#428bca)</div>
<div class="text-success">.text-success：成功，使用浅绿色(#3c763d)</div>
<div class="text-info">.text-info：通知信息，使用浅蓝色(#31708f)</div>
<div class="text-warning">.text-warning：警告，使用黄色(#8a6d3n)</div>
<div class="text-danger">text-danger：危险，使用褐色(#a94442)</div>
<hr>
<p style="text-align: right"></p>
<p class="text-left">text-left	左对齐</p>
<p class="text-right">text-right	右对齐</p>
<p class="text-center">text-center	居中对齐</p>
<p class="text-justify">
    hello网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距,最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
    网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
    网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
</p>

效果展示：

在这里插入图片描述

列表

三种列表方式

去点列表

<%--去点列表--%>
<ul class="list-unstyled">
    <li>无序列表项目1</li>
    <li>无序列表项目2</li>
</ul>

内联列表

<%--内联列表--%>
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>

自定义列表

<%--自定义列表--%>
    <dl class="dl-horizontal">
        <dt>HTML 超文本标记语言</dt>
        <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
        <dt>测试标题不能超过160px的宽度,否则2个点</dt>
        <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
    </dl>

效果展示

在这里插入图片描述

代码风格

使用<code></code> 来显示单行内联代码
使用<pre></pre> 来显示多行块代码
样式pre-scrollable(height，max-height 高度固定为340px，超过则存在滚动条)
使用<kbd></kbd> 来显示用户输入代码。如快捷键

代码：

<%--单行代码--%>
<p style="color: #843534">单行代码</p>
<code>this is a simple code</code>
<%--多行代码,代码会保留原本的空格和回车--%>
<p style="color: #843534">多行代码</p>
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>
<%--快捷键效果--%>
<p style="color: #843534">显示快捷键效果</p>
<p><kbd>ctrl</kbd>+<kbd>s</kbd>进行保存</p>
<%--如果要显示快捷键效果的话则会必须用实体符号来进行代替--%>

<pre>
&lt;h2&gt;Hello World&lt;/h2&gt;
</pre>
<!-- 3.当高度超过，会存在滚动条 -->
<p style="color: #843534">超过一定高度，会存在滚动条</p>
<pre class="pre-scrollable">
            <ol>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
                <li>...........</li>
            </ol>
        </pre>

效果展示：

在这里插入图片描述

表格风格

<table class="table table-striped table-hover table-condensed table-bordered "> <%-- 设置表格的样式--%>
    <tr class="info">
        <th>javaEE</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="success">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="warning">   <%-- 设置表格行的底纹颜色--%>
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
    <tr class="active">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="danger">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>

在这里插入图片描述

表单相关样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <title>表单</title>
    <script>
        function myfunction() {
            // window.location.href='http://www.baidu.com';
            window.location.href='04列表.jsp';
        }
    </script>
</head>
<body>
<button onclick="myfunction()">点击按钮</button><br>
<%--表单--%>
<%--
1.文本框：
    class="form-control" 表单元素的样式
    class="input-lg" ：表单控件较大
    class="input-sm" ： 表单控件较小
--%>
<div class="row">
    <div class="col-md-4"><input type="text" name="x" value="请输入信息" class="form-control"><br><div/>
</div>
        <div class="row">
            <div class="col-md-4">
                <input type="text" name="x" value="请输入信息" class="form-control input-sm">
                <input type="text" name="x" value="请输入信息" class="form-control input-lg">
                <input type="text" name="x" value="请输入信息" class="form-control">
                </div>
                </div>
    <%--文本框--%>
                <div class="row">
                <div class="col-md-4">
                    <input type="text" name="x" value="请输入信息" class="form-control input-sm">
                    <input type="text" name="x" value="请输入信息" class="form-control input-lg">
                    <input type="text" name="x" value="请输入信息" class="form-control">
                    </div>
                </div>
    <%--下拉框--%>
    <div class="row">
        <div class="col-md-4">
            <select class="form-control">
                <option>请选择城市</option>
                <option>上海</option>
                <option>北京</option>
            </select>
        </div>
    </div>
    <%--多选框,本身没有什么用处--%>
 <%--   <div class="row">
        <div class="col-md-4">
            <select class="form-control" multiple="multiple">
                <option>请选择城市</option>
                <option>上海</option>
                <option>北京</option>
            </select>
        </div>
    </div>--%>
    <%--文本域--%>
    <div class="row">
        <div class="col-md-4">
            <textarea class="form-control"></textarea>
        </div>
    </div>

<%--原始文本域范围--%>
<select>
    <option>请选择城市</option>
    <option>上海</option>
    <option>北京</option>
</select><br>
<textarea>
</textarea>

效果展示

在这里插入图片描述

单选框复选框

代码详情

<%--复选框--%>
<%--垂直显示复选框--%>
<div class="row">
    <div class="col-md-3">
       <div class="checkbox" style="background: #9acfea">
           <label><input type="checkbox" name="爱好">唱歌</label>
       </div>
        <div class="checkbox">
            <label><input type="checkbox" name="爱好">跳舞</label>
        </div>
    </div>
</div>
<%--水平显示复选框--%>
<div class="row">
    <div class="col-md-3">
       <label class="checkbox-inline">
           <input type="checkbox" name="hobby">唱歌
       </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="hobby">跳舞
        </label>
    </div>
</div>
<%--单选框--%>
<%--水平显示单选框--%>
<div class="row">
    <div class="col-md-3">
        <label class="checkbox-inline">
            <input type="radio" name="hobby">男
        </label>
        <label class="checkbox-inline">
            <input type="radio" name="hobby">女
        </label>
    </div>
</div>
<%--垂直显示单选框--%>
<div class="row">
    <div class="col-md-3">
        <div class="radio" style="background: #9acfea">
            <label><input type="radio" name="爱好">男</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="爱好">女</label>
        </div>
    </div>
</div>

效果图展示
在这里插入图片描述

按钮

按钮实现跳转

方法一：在button标签中加上onclick属性，赋值为Javascript

<input type="button" onclick='location.href=("index.aspx")' />//在本页面打开
<input type="button" onclick='window.open("bedzhao.aspx")' />//打开新页面

<button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button>

方法二：触发一个函数跳转

<script>
    function jump(){
        window.location.href="http://blog.sina.com.cn/mleavs";
    }
</script>
<input type="button" value="我是一个按钮" οnclick=javascript:jump()>

方法三：a标签的超链接可以直接嵌套一个button

<a href="https://www.baidu.com/">
    <button>点我跳转到度娘！</button>
</a>

方法四：表单的action定向提交跳转

<from action="xx.html" method="post">
    <input type="bottom" value="按钮">
</from>

<%--按钮的几种类型--%>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button>
<%--其他的标签也可以变成按钮--%>
<a href="08单选框复选框.jsp" class="btn btn-success">跳转到百度</a>
<span class="btn btn-success">span标签</span>
<div class="btn btn-success">div标签</div>
<%--设置按钮的大小--%>
<button class="btn btn-info btn-xs">超小按钮</button>
<button class="btn btn-default btn-sm">小型按钮</button>
<button class="btn btn-default btn-primary">正常按钮</button>
<button class="btn btn-danger btn-lg">大型按钮</button>
<br>
<%--按钮禁用--%>
<button class="btn btn-default disabled">按钮</button>
<button class="btn btn-success" disabled="disabled">按钮</button>
<button class="btn btn-danger" onclick="alert('hello')">按钮</button>

按钮效果展示
在这里插入图片描述

表单布局

<%--水平表单
        设置样式 form-horizontal
--%>
<form action="#" method="post" class="form-horizontal" role="form">
    <h2 align="center">用户信息表</h2>
    <%--文本框--%>
    <div class="form-group">
        <label for="uname" class="control-label col-md-3">姓名</label>
        <div class="col-md-6">
            <input type="text" id="uname" placeholder="请输入姓名" class="form-control">
        </div>
    </div>
<%--文本框--%>
    <div class="form-group">
        <label for="upwd" class="control-label col-md-3">密码</label>
        <div class="col-md-6">
            <input type="password" id="upwd" placeholder="请输入密码" class="form-control">
        </div>
    </div>
<%--下拉框--%>
    <div class="form-group">
        <label for="uselect" class="control-label col-md-3">城市</label>
        <div class="col-md-6">
            <select id="uselect" class="form-control">
                <option >请输入所在城市</option>
                <option >广东</option>
                <option >河南</option>
            </select>
        </div>
    </div>
<%--横向多选框--%>
    <div class="form-group">
        <label class="control-label col-md-3">爱好</label>
        <div class="col-md-6">
            <label class="checkbox-inline">
                <input type="checkbox" >唱歌
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" >唱歌
            </label>
        </div>
    </div>
    <%--纵向多选框--%>
    <div class="form-group">
        <label class="control-label col-md-3">爱好</label>
        <div class="col-md-6">
            <div class="checkbox">
                <label><input type="checkbox">唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox">画画</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <input type="submit" value="提交" class="btn btn-success">
        </div>
    </div>
</form>

内联样式

<%--内联样式--%>
<form class="form-inline">
    <div class="form-group">
        <label for="username">姓名</label>
        <input type="text"  id="username">
    </div>
    <div class="form-group">
        <label for="userpwd">密码</label>
        <input type="text"  id="userpwd">
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <button class="btn btn-success">提交</button>
        </div>
    </div>

</form>

效果显示

在这里插入图片描述

缩略图

<div class="container">
    <div class="row">
    <!-- 第一个缩略图 -->
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="abc.png">
            <h3>高圆圆</h3>
            <p>出生于北京市，中国内地影视女演员、模特。</p>
            <button class="btn btn-default">
                <span class="glyphicon glyphicon-heart"></span>喜欢
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-pencil"></span>评论
            </button>
        </div>
    </div>


        <div class="col-md-4">
            <div class="thumbnail">
                <img src="abc.png">
                <h3>高圆圆</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜欢
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>

        <div class="col-md-4">
            <div class="thumbnail">
                <img src="abc.png">
                <h3>高圆圆</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-plus"></span>喜欢
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>
    </div>
</div>

效果展示
在这里插入图片描述

面板效果

<div class="panel panel-warning">
    <div class="panel panel-heading">
      <h2 style="text-align: center">明星合集</h2>
    </div>
    <div class="panel-body">

        <div class="row">
            <!-- 第一个缩略图 -->
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="abc.png">
                    <h3>高圆圆</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>


            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="abc.png">
                    <h3>高圆圆</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>

            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="abc.png">
                    <h3>高圆圆</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>


        </div>
    </div>
</div>

效果展示

在这里插入图片描述

插件

在菜鸟教程上直接搜索，现查现用。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>


<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<p>面包屑导航</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

<p>分页导航</p>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

<p>翻页导航</p>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</div>

效果图显示

在这里插入图片描述

下拉菜单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>Document</title>
    <!-- 引入Bootstrap 的核心CSS文件 -->
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <!-- 引入jquery的核心js文件,需要在bootstrap的js之前引入 -->
    <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入Bootstrap 的核心js文件 -->
    <script src="dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <title>14下拉菜单</title>
</head>
<body>
<!-- 1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框
        <div class="dropdown"></div>
        默认下拉框向上为 dropup ,向下为 dropdown
    -->
<div class="dropdown">
    <!--
         使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle属性
      -->
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜欢的频道
        <!-- 设置下拉箭头 -->
        <span class="caret"></span>
    </button>
    <!-- 下拉菜单项使用一个 ul 列表,并且定义一个类名为 dropdown-menu -->
    <ul class="dropdown-menu">
        <!-- 分组标题: li 添加类名 dropdown-header  来实现分组的功能-->
        <li class="dropdown-header">科普</li>
        <li><a href="#">人与自然</a></li>
        <!-- 分割线: li 添加类名 driver 来实现下拉分割线的功能 -->
        <li class="divider"></li>
        <li class="dropdown-header">影视</li>
        <li class="active"><a href="#">快乐大本营</a></li>
        <li class="disabled"><a href="#">暴走大事件</a></li>
        <li><a href="#">木鱼水心</a></li>
    </ul>
</div>
</body>
</html>

效果图展示

在这里插入图片描述

模态框

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>Document</title>
    <!-- 引入Bootstrap 的核心CSS文件 -->
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <!-- 引入jquery的核心js文件,需要在bootstrap的js之前引入 -->
    <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入Bootstrap 的核心js文件 -->
    <script src="dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <title>15模态框</title>
</head>
<body>
<%--
使用方式一：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal" ，同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id ="identifier" )
使用方式二：通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
打开模态框：$('#identifier').modal('show')
关闭模态框：$('#identifier').modal('hide')
--%>
<%--通过data属性来打开模态框--%>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<%--通过js打开模态框--%>
<button class="btn btn-primary btn-lg" id="btn">开始模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="uname" class="col-md-2 control-label">姓名</label>   <%--要加col-md-2否则姓名则会出现在右边--%>
                    <div class="col-md-8">
                        <input type="text"  id="uname" class="form-control" placeholder="请输入姓名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="upwd" class="col-md-2 control-label">密码</label>
                    <div class="col-md-8">
                        <input type="password"  id="upwd" class="form-control" placeholder="请输入密码">
                    </div>
                </div>


            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<%--绑定按钮的点击事件--%>
<script type="text/javascript">
    $('#btn').click(function () {
            /*手动打开模态框*/
        $("#myModal").modal('show');
    });
    $('#submit_btn').click(function () {
        $("#myModal").modal('hide');
    });
</script>
</body>
</html>

效果图

在这里插入图片描述

爱玩的程序猿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap 入门
qq_36146167的博客
02-19 98
响应式布局 概念：对不同屏幕尺寸做出响应，并进行相应布局 原理：使用媒体查询设置不同的断点，进行不同css布局响应 优点：一个网站可以兼容多种终端，不需要重复开发 缺点：工作量大、代码累赘、加载时间长、效率低、冗余代码较多 适用场景：结构比较简单，展示型网站 不适用场景：交互较多，功能性的网站不适用 容器 1.流体容器 width: auto // 注意 auto 和 100% 的区别 两侧15px padding 2.固定容器 屏幕大小 (设置断点) width xs（小于768p
Bootstrap快速入门GitChat1
08-03
Bootstrap快速入门GitChat1
BootStrap快速入门
chenguoao1999的博客
09-15 1004
课程笔记Day47 BootStrap快速入门 BootStrap栅格系统 BootStrap常用样式 第一章 BootStrap快速入门 第01节 基础理论 1、概念介绍 1. 什么是 BootStrap ? BootStrap 是一款前端的框架, 基于 HTML CSS 和 JavaScript 开发出来的, 目前持续的更新着 2. BootStrap 有什么作用啊? 可以快速的搭建网页, 内部制定了很多的样式效果,可以直接拿过来快速使用。 3. BootStrap 有什么特色呢? 支持响
BootStrap快速入门基础教程系列
05-13
课程目标从零开始系统学习Bootstrap，并学习其各个组件的使用方法及作用，带你一步一步进入bootstrap的世界，带你快速上手BootStrap的基础操作。适用人群想学习bootstrap的人群，在前端方面想晋级的人群，想快速搭建页面的人群课程简介Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 它做为前端老牌ui框架之一，使用率非常高，上手难度并不难。本课程则是带你一步一步进入bootstrap的世界，带你快速掌握BootStrap的基础操作。 课程简介 Bootstrap是由Twitter推出的一个前台页面开发框架，在行业之中使用较为广泛。此开发框架包含了大量的CSS、JS程序代码，可以帮助开发者（尤其是不擅长页面开发的程序人员）轻松的实现一个不受浏览器限制的精美界面效果。本课程将从响应式布局、Flex布局，Bootstrap的取得、配置、使用等概念进行讲解，为读者完整的讲解Bootstrap中基础样式与各个操作组件，并且在最后还会通过一系列的代码案例来讲解Bootstrap的实战应用。
Bootstrap：简介和基本使用
最新发布
程序员无羡的博客
03-20 1266
Bootstrap：简介和基本使用
Bootstrap 入门
我的的博客哦
05-08 2812
🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
Bootstrap教程——快速上手（最给力的前端框架）
只想AC的博客
06-03 5014
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码
Bootstrap快速入门.pdf
08-19
Bootstrap快速入门.pdf
bootstrap table使用入门基本用法
08-30
主要为大家详细介绍了bootstrap table使用入门基本用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap零基础入门教程(三)
09-02
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。本文重点给大家介绍Bootstrap零基础入门教程(三) ，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
BootStrap入门教程
07-27
Boostrap是一个非常受欢迎的前端开发框架，该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装，... 使用Bootstrap可以快速制作精美的响应式页面，并且兼容移动端。
Bootstrap入门书籍之（零）Bootstrap简介
10-22
Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之（零）Bootstrap简介，需要的朋友参考下
Bootstrap入门教程一Hello Bootstrap初识
01-19
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...
Bootstrap零基础入门教程(二)
10-21
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了Bootstrap零基础入门教程(二) 的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友...
BootStrap入门教程.pdf
08-26
2011年，twitter的“一...大量工程师踊跃为该项目贡献代码， 社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstr ap建设的网站：界面清新、简洁;要素排版利落大方。
bootstrap入门教程
专治八阿哥的孟老师
03-31 6276
bootstrap简介：​ bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。​ bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。boostrap特点​ 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：​​ 2 ) 所有的主流浏览器都支持 bootstrap。​​ 3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
Bootstrap入门到精通（最全最详细）
Debug的博客
02-22 1048
随着Bootstrap的问世，Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。以上就是今天要讲的内容，本文目前简单介绍了Bootstrap的使用，后续还会继续更行。
boostrap快速入门
09-10
关于Bootstrap快速入门，我可以为您提供一些基本信息。 Bootstrap是一个流行的前端开发框架，它使用HTML、CSS和JavaScript来构建响应式和移动设备优先的网站和应用程序。以下是一些快速入门步骤： 1. 下载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值