先上代码：

<!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. 【记录】有趣的python模块记录

    1. paramiko: 基于SSH用于连接远程服务器并执行相关操作,公钥私钥登录等等

  2. python第九课——while死循环

    2.3.无限循环/死循环: 何时发生无限循环? 循环条件永远为True,就出现了无限循环 [注意] 无限循环是需要避免的,因为它极其占用系统资源: 但是配合我们之后讲的break等关键字,就会变得更有 ...

  3. 是否含有RTTI（运行时类型信息）是动态语言与静态语言的主要区别

    运行时类型信息代表类型信息和对内存的操作能力. 运行时类型信息是运行时系统的基础. 类型信息分为编译时类型信息和运行时类型信息两种: 静态语言的类型信息只在编译时使用和保留,在可执行文件中没有类型信息 ...

  4. Hive学习之路 （二）Hive安装

    Hive的下载 下载地址http://mirrors.hust.edu.cn/apache/ 选择合适的Hive版本进行下载,进到stable-2文件夹可以看到稳定的2.x的版本是2.3.3 Hive ...

  5. openstack常用的一些命令

    查看rabbitmq 队列 rabbitmqctl list_queues 复制代码 查看keystone的用户 keystone user-list 复制代码 查看keystone endpoint ...

  6. 简单的XSS手动测试

    好吧,我也是初学者,写这个随笔,主要也是为了记录,自学到的点. 简单的案例,见http://www.cnblogs.com/trhimily/p/3898915.html 总结一下主要的点: 1. u ...

  7. Spring源码分析（十九）容器的功能扩展概览

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 经过前面几章的分析,相信大家已经对 Spring 中的容器功能有了简单 ...

  8. 解决JS在url中传递参数时参数包含中文乱码的问题

    1.传参页面JavaScript代码: function go_mark(id,jobname,headimgurl,nickname){ window.location.href = "m ...

  9. cocoapods导入三方库头文件找不到问题

    问题描述:使用cocoapods时,import 找不到头文件. 问题原因: 1.缓存导致 2.没设置头文件的目录. 1.解决办法: command + k 清理工程 ,找到DerivedData文件 ...

  10. Unity 4.7 导出工程在XCode9/10上报错 validateRenderPassDescriptor:644: failed assertion `XXXX'

    Unity 4.7 导出工程在XCode9/10上报错 validateRenderPassDescriptor:644: failed assertion `Texture at colorAtta ...