bootstrap-預定義樣式及簡單登入框

阿新 • • 發佈：2019-01-20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>預定義樣式風格</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js" 
></script>

    <style type="text/css">
        #login{width: 400px;}
    </style>
</head>
<body style="height: 2000px">
<div class="container">
    <br>
    <input type="button" value="自定義" class="btn">
    <input type="button" value="首選項" class="btn btn-primary" 
>
    <input type="button" value="成功" class="btn btn-success">
    <input type="button" value="一般資訊" class="btn btn-info">
    <input type="button" value="警告" class="btn btn-warning">
    <input type="button" value="危險" class="btn btn-danger">
    <input type="button" value 
="預設" class="btn btn-default">
    <input type="button" value="連結" class="btn btn-link">
    <br><br>
    <input type="button" value="首選項" class="btn btn-primary">
    <input type="button" value="首選項" class="btn btn-primary btn-lg">
    <input type="button" value="首選項" class="btn btn-primary btn-sm">
    <input type="button" value="首選項" class="btn btn-primary btn-xs">
    <br><br>
    <br><br>
    <input type="button" value="首選項" class="btn btn-primary">
    <input type="button" value="首選項" class="btn btn-primary active">
    <input type="button" value="首選項" class="btn btn-primary disabled">
    <br><br>
    <br><br>
    <p>預設段落</p>
    <p class="bg-primary">首選項</p>
    <p class="bg-success">成功</p>
    <p class="bg-info">一般資訊</p>
    <p class="bg-warning">警告</p>
    <p class="bg-danger">危險</p>
    <br><br>
    <span>預設文字</span><br>
    <span class="text-paimary bg-primary">首選項</span><br>
    <span class="text-success bg-success">成功</span><br>
    <span class="text-info bg-info">一般資訊</span><br>
    <span class="text-warning bg-warning">警告</span><br>
    <span class="text-danger bg-danger">危險</span><br>
    <br><br>
    <div class="alert alert-primary">我是警告框</div>
    <div class="alert alert-warning">我是警告框</div>
    <div class="alert alert-info">我是警告框</div>
    <div class="alert alert-success">我是警告框</div>
    <div class="alert alert-danger">我是警告框</div>
    <br><br>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4>我是面板的標題</h4>
        </div>
        <div class="panel-body">
            <h4>我是面板的主體內容</h4>
        </div>
    </div>
    <br><br><br><br>


    <div id="login" class="panel panel-primary">
        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <div class="form-group">
                <label>使用者名稱：</label><input type="text" class="form-control input-sm">
                <div class="alert alert-warning">使用者名稱不能為空</div>
                <label>密碼：</label><input type="password" class="form-control">
                <a href="#" class="text-info">忘記密碼</a>
            </div>
            <input type="button" value="登入" class="btn btn-primary pull-right">
        </div>
    </div>
</div>  
</body>
</html>
    <!-- 
    預定義風格的樣式： 首選項 成功 一般資訊 警告 危險 

    1.按鈕樣式：
     btn(自定義) primary  success  info  warning  danger default(預設) link(連結)
    2.按鈕大小：
    如果沒有定義就是預設大小 還有三種：lg sm xs
    3.按鈕狀態：
    選中狀態active  禁用狀態:disabled  
    4.按鈕種類：
    常給 a input button 這三種標籤加按鈕樣式
    5.按鈕預設是行內樣式，可以通過設定btn-block使它變成塊狀，獨佔一行
    6.按鈕組，下節學習

    <種類 class='btn btn-[primary  success  info  warning  danger] btn-[lg sm xs] [active disabled]'>


    背景樣式：
    首選項 成功 一般資訊 警告 危險
    class='bg-[primary  success  info  warning  danger]'


    文字樣式：
    首選項 成功 一般資訊 警告 危險
    class='text-[primary  success  info  warning  danger]'


    警告樣式：
    首選項 成功 一般資訊 警告 危險
    class='alert alert-[primary  success  info  warning  danger]'


    面板樣式：
    首選項 成功 一般資訊 警告 危險
    class='panel panel-[primary  success  info  warning  danger]'
    class="panel-[heading body]"


    表單樣式：
    class="form-control" 大小可以設定input-[lg sm xs]
    <input type="text" class="form-control input-sm">

    -->

bootstrap-預定義樣式及簡單登入框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

putty 0.7 下載、安裝、樣式及自動登入設定

putty 是遠端操控伺服器的一款軟體。一、下載：我是用的360軟體管家，下載的。二、安裝：只是更改了安裝位置，然後就是下一步...... 三、輸入IP。樣式永久設定： windows -> appearance下可以設定字型。 windows -&

makefile 的主要預定義變數及常用命令列選項

預定義變數含義$* 不包含副檔名的目標檔名稱。$+ 所有的依賴檔案，以空格分開，並以出現的先後為序，可能包含重複的依賴檔案。$< 第一個依

jQuery + bootstrap 4 簡單登入驗證

簡單的表單驗證bootstrap4自帶的js檔案就可以實現哦 bootstrap.js自帶的表單驗證的效果：下面貼html程式碼 <!DOCTYPE html> <html lang="en"> <head> <met

各種簡單樣式的彈出框這是一個基於 AlertDialog 和 Dialog 這兩個類封裝的多種彈出框樣式，其中提供各種簡單樣式的彈出框使用說明。同時也可自定義彈出框。

jjdxm_dialogui 專案地址：jjdxmashl/jjdxm_dialogui 簡介：各種簡單樣式的彈出框這是一個基於 AlertDialog 和 Dialog 這兩個類封裝的多種彈出框樣式，其中提供各種簡單樣式的彈出框使用說明。同時也可自定義彈出框。更多：作者

InfluxData的Chronograf中的預定義儀表板如何使度量標準變得簡單

問題視覺化資料是一個特別難的問題，但我們不希望在使用視覺化工具時考慮這一點。我們希望儘可能快速，輕鬆地獲取資料。考慮到這一點，我特別興奮地看到最新版本的Chronograf（1.7.3），其中包括改進的入門，這給了我正在尋找的東西。經驗我正在使用MySQL作為我的一些Rails應用程式的資

Axure的快捷鍵，及網頁版簡單登入頁面，安卓圖示

複製快捷鍵： ctrl+滑鼠左鍵拖拽 ctrl+D:複製出來的新元件的XY的值各加10PX; ctrl+C,----》貼上ctrl+V 選中兩個框下拉下面一個，兩個就一樣放大右鍵–》組合中間按一

玩轉web之servlet(六)---session介紹及簡單使用（登入驗證中儲存資訊）

在瀏覽器與伺服器進行互動時，往往需要把涉及到的一些資料儲存下來，這時就需要使用cookie或session進行狀態管理。這篇文章先來說說session怎麼用，首先在servlet中建立一個session來儲存資訊，舉個例子，在做登陸驗證時，如果登陸成功，需要將使用者的資訊儲

資料提交及彈出框樣式

function cancleFun(orderId) { parent.$.messager.confirm('確認', '確定要撤銷這條申請嗎?', function(r) { if(r){ var pos

自己做得簡單的登入框

package com.chinasoft.java.am; import java.awt.BorderLayout; public class denglu extends JFrame {private JPanel contentPane;private JPass

Oracle異常處理及舉例（Oracle預定義異常和自定義異常）

PL/SQL 異常處理 Oracle系統異常分別為兩大類：預定義異常：Oracle系統自身提供自定義異常：Oracle不知曉無法控制的異常，特定的業務邏輯。由使用者在程式中定義，Oracle自動引發Oracle常見的預定義異常 ZERO_DIVIDE

c/c++預處理過程詳解（二）之條件編譯及預定義的巨集

未經博主同意不得私自轉載！不準各種形式的貼上複製本文及盜圖！首先對於上篇文章中巨集定義的補充：（1）#define NAME"zhangyuncong" 程式中有"NAME"則，它會不會被替換呢？（2）#define 0x abcd 可以嗎？也就是說，可不可以用不是

Bootstrap 全域性樣式的簡單介紹

Bootstrap這個框架相信對於前端來說都不陌生，之前剛接觸時就只是“拿來主義”：需要用到時就檢視下Bootstrap的官網文件直接將需要的外掛或者樣式拷貝下來用，最近終於有機會好好靜下心來了解這個框架。對Bootstrap的認知也有了一定的改變，下面是本人在學

Vue爬坑之路二：使用Muse-UI前端框架及axios，實現簡單登入頁

一：安裝UI元件 Muse UI 基於 Vue2.0 開發，Vue2.0是當下最快的前端框架之一，小巧，api友好，可用於開發的複雜單頁應用，安裝的方式有很多種，官方推薦的是使用npm輔助安裝：在專案的根目錄中開啟命令提示符輸入： npm

Bootstrap登入框自適應水平居中+垂直居中

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

CxImage的編譯及簡單使用舉例

end ron bin 源碼 clu cximage itl tools ostream 1、從http://sourceforge.net/projects/cximage/下載最新的CxImage 702源碼； 2、解壓縮後，以管理員身份打開CxImageFu

【Android 應用開發】 ActionBar 樣式具體解釋 -- 樣式主題簡單介紹 Actionbar 的 icon logo 標題菜單樣式改動

detail sub str 進度條代碼分析 extc dst 模式 html 作者 : 萬境絕塵 ([email protected]/* */)轉載請著名出處 : http://blog.csdn.net/shulianghan/article/deta

cookie的簡單留言框

數據 res 系統網頁多說 turn 再次內容 .get 　　我們在網頁瀏覽時退出後，再次進入時會有上次的記錄，這就用的上cookie屬性了，cookie就是服務器暫存放在你計算機上的一筆資料，好讓服務器用來辨認你的計算機。當你在瀏覽網站的時候，Web服務器會先送一小

bootstrap-預定義樣式及簡單登入框

相關推薦