bootstrap表單的基本操作

阿新 • • 發佈：2018-11-02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrap表單的基本操作</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form action="" role="form">
                <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="text" 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>

其他的請參考：https://v3.bootcss.com/css/#forms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrap表單自適用設計</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

            <form action="" role="form" class="form-horizontal">
                <fieldset>
                    <legend class="text-center">使用者登陸</legend>
                    <div class="form-group">
                        <label for="name" class="col-md-2 control-label">使用者名稱登陸：</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="name" placeholder="UserName">
                        </div>   
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-md-2 control-label">密碼：</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="password" placeholder="PassWord">
                        </div>
                        
                        
                    </div>                    
                </fieldset>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                       <button type="submit" name="button" class="btn btn-info">提交</button> 
                    </div>
                    
                </div>
            </form>


</div>
</body>
</html>

bootstrap表單的基本操作

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title&g

Bootstrap表單（基本表單、內聯表單、水平表單）

表單型別 <form> 標籤和控制元件放在一個<div>裡所有的文字元素input、textarea、select 隱藏<label>標籤

數據表的基本操作

gin rename 數據表 hang des prim 修改字段 alter 字段名一、創建數據表 (1) 創建數據表：CREATE TABLE <表名> ( ...... );(2) 使用主鍵約束：PRIMARY KEY 、FOREIGN KE

bootstrap-表單控件——輸入框input

bootstrap-表單控件——輸入框input1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Co

bootstrap-表單控件——單選按鈕水平排列

bootstrap-表單控件——單選按鈕水平排列1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Co

bootstrap-表單控件——復選框checkbox和單選擇按鈕radio

bootstrap-表單控件——復選框checkbox和單選擇按鈕radio1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-

bootstrap-表單控件——塊狀按鈕

bootstrap-表單控件——塊狀按鈕1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compat

Angular（ng表單指令操作）

rep class itl lock als 表達 tro [] pri html部分 ................................................. <!DOCTYPE html><html lang="en" ng-

鏈表的基本操作java語言實現

auth ndb ack pan log 定義 pac ext col package com.baorant; public class JavaDemo { public static void main(String[] args) {

鏈表的基本操作（元素刪除，插入，鏈表生成，鏈表倒置）

printf 輸出 size ++ can 鏈表的基本操作 nbsp 插入 include #include<stdio.h> #include<string.h> #include<stdlib.h> typedef struct

【C++/數據結構】單鏈表的基本操作

clear default als troy pub 插入 else fonts pac #pragma once #ifndef _CLIST_H_ #define _CLIST_H_ #include <iostream> #include <

Mysql-5-數據表的基本操作

報錯 reference 重復語法約束實現數據表自動增加 create 1.創建表：之前需要use database database_name 然後create table 表名（）；例：創建員工表tb_employee1，結構如下表所示字段名稱

bootstrap表單驗證插件

label validator email ref put ida 身份證驗證 prim note bootstrapvalidator源碼：https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator

Bootstrap表單

只需要文本輸入柵格 copy code orm block r12 Bootstrap 提供了下列類型的表單布局：垂直表單（默認） -> 這個不好看，都是手機版了，PC版占一排不好看；內聯表單 -> 我相信這個才是你想要的，PC版響應橫排，手機

Oracle對數據表的基本操作

font use add num 單個基本類型 rop constrain 選擇主鍵的原則：最少性盡量選擇使用單個鍵作為主鍵穩定性盡量選擇數值更新少的列作為主鍵 1、創建數據表(CREATE TABLE) --創建數據表Student create tab

Java實現雙向循環鏈表的基本操作

scrip ide head ring 鏈表的基本操作 print static count out 1 package Eric.ADT; 2 3 /** 4 * <p> 5 * Title:doubleLinkedList 6

MySQL<數據庫和表的基本操作>

字段值提高主鍵約束 dex pri 表示 span 整數 describe 數據庫和表的基本操作數據庫基礎知識創建數據庫　　就是在數據庫系統中劃分一塊存儲數據的空間　　CREATE DATABASE itcast; 查看數據庫　　SHOW CREATE DAT

mysql5.7 數據表的基本操作

mysql 數據表基本操作前言在創建數據庫之後，接下來的工作是創建數據表，所謂的數據表，指的是在已經創建好的數據庫中建立新表。創建數據表的過程是規定數據列的屬性的過程，同時也是實施數據完整性約束的過程。1.創建表屬於數據庫，在創建數據表之前，應該使用語句“use”<數據名> 指定操

bootstrap 表單 input group 輸入框內帶字符加文字符號

默認 amp 字符 orm -s 輸入框 style 輸入 code <div class="form-group" id=‘rule4‘ style=‘display:none;‘>

Bootstrap表單樣式

put set png tex leg label 數據庫 sel 樣式 <form class="form-horizontal" role="form"> <fieldset>

bootstrap表單的基本操作

相關推薦