先上代码：

<!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. springmvc入门之HelloWorld篇

    springmvc是一个基于spring的mvc框架,各种优点啥的用过就知道了.下面开始讲HelloWorldController的实现. 1.开发环境搭建<导jar包+配置文件> 1.1 ...

  2. KVOController原理解析

    1.使用类似动态代理的模式和消息派发中枢模式实现整个架构: 2.使用NSMapTable和NSHashTable进行切面信息的增删查维护:主要用于去重和查看是否存在. 实现方式 消息流 KVOCont ...

  3. springboot 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data.web.SpringDataWebAutoConfiguration.pageableCustomizer

    springboot +gradle 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data ...

  4. 【模板】deque实现单调队列

    双端队列deque容器: 关于deque最常用的有这几个函数: 都是成员函数 双端队列模板题:[洛谷]P2952 [USACO09OPEN]牛线Cow Line #include<iostrea ...

  5. 【转】Android系统中的.apk文件和dex文件

    1. *.apk文件 APK是Android Package的缩写,即Android安装包.通过将APK文件直接传到Android模拟器或Android手机中执行即可安装. 使用Android打包工具 ...

  6. Java基础加强之集合

    集合整体框架图 各集合框架的概述 1. Collection(常用List和Set,不常用Queue和Vector),单元素集合. 2. Map(常用HashMap和TreeMap,不常用HashTa ...

  7. 更改backend

    keras默认的backend是tensorflow,更改成theano方法如下: vim ~/.keras/keras.json { "image_dim_ordering":& ...

  8. P2467 [SDOI2010]地精部落

    题目描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为N的山脉H可分为从左到右的N段,每段有一个独一无二的高度Hi,其中Hi是1到N之间的正整数 ...

  9. BUAA_OO第一单元总结性博客作业——表达式求导

    一.程序设计思路 在我的三次作业中都采用了类的分层结构,采用逐项匹配,分层求导的思路. (一). 第一次作业中构建了Polynimial(多项式)类,在类的构造器中就完成了对非法空格的判断并对合法表达 ...

  10. HTML5 新增内容

    1. 新增标签 音频 <audio> <source src=""/> </audio> 视频 <video> <source ...