bootstrap练习

简介: bootstrap练习
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- bootstrap css引入 -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- jquery js引入 -->
        <script src="js/jquery.min.js"></script>
        <!-- bootstrap js引入 -->
        <script src="js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container">
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">电子邮件地址</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <small id="emailHelp" class="form-text text-muted">我们永远不会和别人分享你的电子邮件。</small>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
              </div>
              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">记住我</label>
              </div>
              <button class="btn btn-primary" id="login">登录</button>
            </form>
        </div>
        <!-- 引入自定义js,写在最后的原因是希望等页面所有元素加载完之后再执行 -->
        <script src="js/login.js"></script>
    </body>
</html>
相关文章
|
3月前
|
前端开发 JavaScript 容器
Bootstrap4 Jumbotron
Bootstrap 4 Jumbotron 是一个用于展示重要信息和功能的模态框,通常用于页面头部或页面中部的重点展示区域。它具有全屏宽度的布局,可以包含文本、图像、按钮等元素,并且可以自动适应不同的屏幕尺寸。Jumbotron 是一个灵活的组件,可以用于多种不同的场景,例如介绍公司或产品、展示广告或促销信息、提供导航或搜索功能等。
31 9
|
7月前
|
开发框架 前端开发 JavaScript
Bootstrap
Bootstrap 是一个流行的前端开发框架,用于构建现代、响应式、移动设备优先的 Web 应用程序。它提供了大量的预构建组件和样式,使开发人员可以快速构建美观且功能强大的网站
86 4
|
7月前
|
前端开发
bootstrap
bootstrap
33 0
|
8月前
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
85 0
|
前端开发
1、Bootstrap
1、Bootstrap
102 0
|
前端开发 容器
一篇文章学会使用BootStrap
一篇文章学会使用BootStrap
229 0
一篇文章学会使用BootStrap
|
前端开发 JavaScript 编解码
Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.
1160 0
|
前端开发
|
前端开发 JavaScript 容器
|
前端开发
Bootstrap分为几部分?
Bootstrap分为几部分?
957 0