<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>留言板注册练习</title>

    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">

</head>

<body class="container">

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <a class="navbar-brand" href="#">留言板</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">我要留言<span class="sr-only">(current)</span></a></li>

      </ul>

      <form class="navbar-form navbar-right">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">搜留言</button>

      </form>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

<div class="row">

  <div class="col-md-4"></div>

  <div class="col-md-4">

      <legend class="text-center">用户注册</legend>

    <form>

  <div class="form-group">

    <label for="exampleInputEmail1">用户名</label>

    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Username">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">密码</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">确认密码</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <button type="submit" class="btn btn-primary">注册</button>

</form>

  </div>

  <div class="col-md-4"></div>

</div>

<nav class="navbar navbar-default navbar-fixed-bottom">

  <div class="container">

    版权所有@张千禧

  </div>

</nav>

</body>

</html>

Bootstrap留言板界面练习的更多相关文章

  1. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  2. 【weiphp微信开发教程】留言板插件开发详解

    基于weiphp框架的留言板插件教程: 1.功能分析 传统的留言板应该具有发布留言.查看留言.回复留言.管理留言等功能,本教程开发的是最基本的留言板,仅包含发布留言和查看留言两个功能,根据功能用boo ...

  3. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

  4. 使用PHP连接数据库实现留言板功能

    PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset=&qu ...

  5. 数据库留言板例题：session和cookie区别

    session和cookie区别: <?php session_start(); //session_start();必须写在所有的php代码前边 ?> <!DOCTYPE html ...

  6. ajax练习四留言板

    留言界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. Web开发从零单排之二：在自制电子请帖中添加留言板功能,SAE+PHP+MySql

    在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...

  8. jsp 用application对象制作留言板

    <%@ page contentType="text/html; charset=gb2312"%> <html> <body> <for ...

  9. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

随机推荐

  1. ThreadLocal以及强软弱虚引用

    1.ThreadLocal ThreadLocal即线程本地,可以实现每个线程存入取出TreadLocal值互不影响.因为TheadLocal底层是用了一个Map结构存放数据,而这个Map是从当前这个 ...

  2. leetcode137. 只出现一次的数字 II

    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素.说明:你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗?示例 1:输入: [2,2 ...

  3. Eclipse改字体大小

    Windows ->Perferences ->General ->Appearance ->Colors and Fonts ->Basic ->Text Fon ...

  4. 通过weakHashMap避免过期引用导致的内存泄漏

    问题由来 数组为基础实现的集合在退出元素时,并不会将引用指向空指针,过期引用存在对象便不会被回收. 措施 1.WeakHashMap当其中的key没有再被外部引用时,就会被回收.ThreadLocal ...

  5. Steps 组件的设计与实现

    NutUI 组件源码揭秘 前言 本文的主题是 Steps 组件的设计与实现.Steps 组件是 Steps 步骤和 Timeline 组件结合的组件,在此之前他们是两个不同的组件,在 NutUI 最近 ...

  6. 自动化运维工具之Puppet变量、正则表达式、流程控制、类和模板

    前文我们了解了puppet的file.exec.cron.notify这四种核心资源类型的使用以及资源见定义通知/订阅关系,回顾请参考https://www.cnblogs.com/qiuhom-18 ...

  7. keil/MDK代码配色

    个人配色方案,仅供参考.

  8. moviepy音视频剪辑：使用fl_time进行时间特效处理报错ValueError: Attribute duration not set

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在使 ...

  9. IT人的5G网络架构视点：从网络架构演进的前世今生详解5G各NF网络功能体

    一.引言 以前从来没关注电信无线上网网络的具体架构(也即PS域架构),现在开始学5G接触这些东西时,理解起来很痛苦,资料也少,于是一方面到处找人咨询,一方面到处查资料,最后发现应该从3G.4G时代的架 ...

  10. PyQt（Python+Qt）学习随笔：部件拉伸策略sizePolicy优先级

    部件的尺寸调整策略或拉伸策略sizePolicy有7个值,如果同一个布局中的不同部件设置了不同的拉伸策略策略,在整个布局空间拉伸时,它们会怎么进行拉伸处理呢? 在未设置拉伸因子的情况下,Qt中这些拉伸 ...