先上代码：

<!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. java内部类案例

    实现键值对的存储输出 import java.util.Arrays; public class EntryDemoTest { //实现键值对的存储 public static void main( ...

  2. npm使用小结

    npm包管理工具使用小结 npm(node package manager)是一个node包管理工具,我们可以方便的从npm服务器下载第三方包到本地使用. 安装: NPM是随同NodeJS一起安装的包 ...

  3. [错误记录]python requests库 Response 判断坑

    在requests访问之后, 我直接判断resp的值, 如下: if resp: do something 发现当Response 为500的时候没有进入if分支, 检查源码,发现Response重写 ...

  4. redis key/value 出现\xAC\xED\x00\x05t\x00\x05

    1.问题现象: 最近使用spring-data-redis 和jedis 操作redis时发现存储在redis中的key不是程序中设置的string值,前面还多出了许多类似\xac\xed\x00\x ...

  5. Payment：微信支付配置文件设置说明

    项目GitHub地址:https://github.com/helei112g/payment 微信支付个人觉得在帐号设置上有些麻烦,帐号太多啦,支付宝目前就是一个应用基本涵盖了所有的接口开发. 可能 ...

  6. h5py

    解决办法: sudo apt-get install libhdf5-dev sudo apt-get install python-h5py

  7. 模糊控制——（3）模糊自适应整定PID控制

    1.原理 这种控制必须精确地确定对象模型,首先将操作人员(专家)长期实践积累的经验知识用控制规则模型化,然后运用推理便可对PID参数实现最佳调整. 自适应模糊PID控制器以误差e和误差变化ec作为输入 ...

  8. Spring源码分析（一）基本介绍

    摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 前言 作为一名开发人员,阅读源码是一个很好的学习方式.本文将结合< ...

  9. 用ansible2.5在Centos7.2上部署OpenShift3.9(转)

    1.环境: 主机名      ip                   角色 master    10.2.1.198      master node1     10.2.1.174      no ...

  10. Mysql 安全登陆工具 mysql_config_editor

    mysql_config_editor 帮助信息请查看 man mysql_config_editor 或 mysql_config_editor -? 或 mysql_config_editor s ...