先上代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="">
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label for="name">用户名称</label>
<input type="text" class="form-control" id="name" placeholder="UserName"/>
<p class="help-block">可以用手机号或邮箱登录</p>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="PassWord"/>
<p class="help-block">密码不少于6位</p>
</div>
</fieldset>
<button type="submit" name="button" class="btn btn-info btn-block">提交</button>
</form>
</div>
</div>
</div>
</body>
</html>

1、导入bootstrap.min.css就能通过设置标签的class或id属性使用其中的css样式

2、导入jquery框架包，因为bootstrap的js也是基于jQuery 的

3、导入bootstrap.min.js

4、通过form-group，form-control，help-block等可以直接使用bootstrap框架css样式表中定义的样式

5、其他具体请了解 https://v3.bootcss.com/css/

我的第一个bootstrap实例的更多相关文章

  1. Android 只开启一个Activity实例

    在一个Activity中,多次调用startActivity()来启动另一个Activity,要想只生成一个Activity实例,方法有两种. 方法一:设置起动模式 一个Activity有四种启动模式 ...

  2. 将oracle冷备份恢复到另外一个数据库实例中

    因更换服务器需要将Oracle数据库转移到另外台Oracle中.说明: 1.测试环境为:windows server2003 和 oracle 10g. 2.2台服务器安装的程序目录一样,数据目录不一 ...

  3. 第一个python实例--监控cpu

    #第一个python实例:监控cpu #/bin/bash/env Python from __future__ import print_function from collections impo ...

  4. servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解1

    servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解 (2013-06-19 19:30:40) 转载▼     servlet的非线程安全,action的线程安全 对提交 ...

  5. 12C RAC中的一个数据库实例自动crash并报ORA-27157、ORA-27300等错误

    rhel7.2上安装12C RAC数据库后,其中一个数据库实例经常会自动crash.查看alert日志发现以下错误信息: Errors in file /d12/app/oracle/diag/rdb ...

  6. 一个 XSD 实例

    一个 XSD 实例 本节会为您演示如何编写一个 XML Schema.您还将学习到编写 schema 的不同方法. XML 文档 让我们看看这个名为 "shiporder.xml" ...

  7. Asp.Net MVC是否针对每次请求都重新创建一个控制器实例

    一.Asp.Net MVC是否针对每次请求都重新创建一个控制器实例 默认情况下,答案是确定的. ControllerBuilder类 ControllerBuilder.Current用户获取默认的控 ...

  8. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  9. 如何让Windows程序只运行一个程序实例？

    要实现VC++或者MFC只运行一个程序实例,一般采用互斥量来实现,即首先用互斥量封装一个只运行一个程序实例的函数接口: HANDLE hMutex = NULL; void MainDlg::RunS ...

随机推荐

  1. Windows 7防火墙阻止了远程桌面连接的解决方法

    在[系统属性]中已经设置了允许远程桌面连接了,但是还是不能远程桌面的话,很可能是你的windows防火墙处于“启用”状态,防火墙阻止了windows 7系统的远程桌面连接.你可以使用以下的方法检查解决 ...

  2. 【cs231n】图像分类-Nearest Neighbor Classifier(最近邻分类器)【python3实现】

    [学习自CS231n课程] 转载请注明出处:http://www.cnblogs.com/GraceSkyer/p/8735908.html 图像分类: 一张图像的表示:长度.宽度.通道(3个颜色通道 ...

  3. 【洛谷】【动态规划(多维)】P1006 传纸条

    [题目描述:] 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸 ...

  4. Spring Boot Mock单元测试学习总结

    单元测试的方法有很多种,比如使用Postman.SoapUI等工具测试,当然,这里的测试,主要使用的是基于RESTful风格的SpringMVC的测试,我们可以测试完整的Spring MVC流程,即从 ...

  5. 【转】 Android应用内多进程分析和研究

    正常情况下,一个apk启动后只会运行在一个进程中,其进程名为AndroidManifest.xml文件中指定的应用包名,所有的基本组件都会在这个进程中运行.但是如果需要将某些组件(如Service.A ...

  6. javascript:typeof与instanceof区别

    from:http://www.wxwdesign.cn/article/skills/javascript_typeof_instanceof.htm JavaScript中typeof和insta ...

  7. ajax执行失败原因

    ajax 跳入error的一些原因 先放一个标准的jquery的ajax代码: $.ajax({ type: 'POST', url: 'getSecondClassification', data: ...

  8. vue2 broadcast和dispatch的理解

    /* broadcast 事件广播 @param {componentName} 组件名称 @param {eventName} 事件名 @param {params} 参数 遍历寻找所有子孙组件,假 ...

  9. D. Timetable

    http://codeforces.com/problemset/problem/946/D Ivan is a student at Berland State University (BSU). ...

  10. 聊聊并发——深入分析ConcurrentHashMap

    术语定义 术语 英文 解释 哈希算法 hash algorithm 是一种将任意内容的输入转换成相同长度输出的加密方式,其输出被称为哈希值. 哈希表 hash table 根据设定的哈希函数H(key ...