Bootstrap和基於Bootstrap的登錄驗證示例


Bootstrap介紹

Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。

它是為實現快速開發Web應用程序而設計的一套前端工具包。

它支持響應式布局,並且在V3版本之后堅持移動設備優先。

為什么要使用Bootstrap?

在Bootstrap出現之前:

命名:重復、復雜、無意義(想個名字費勁)

樣式:重復、冗余、不規范、不和諧

頁面:錯亂、不規范、不和諧

在使用Bootstrap之后: 各種命名都統一並且規范化。 頁面風格統一,畫面和諧。

Bootstrap下載

官方地址:https://getbootstrap.com

中文地址:http://www.bootcss.com/

我們使用V3版本的Bootstrap,我們下載的是用於生產環境的Bootstrap。

Bootstrap環境搭建(預編譯版)

目錄結構:

bootstrap/
├── css/
│   ├── bootstrap.css    // Bootstrap主要導入這個css
│   ├── bootstrap.css.map  // css源碼映射表
│   ├── bootstrap.min.css  // css的壓縮版
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css  // Bootstrap的自帶的主題樣式
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js  // Bootstrap的js插件
│   └── bootstrap.min.js  // 壓縮版
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

處理依賴

由於Bootstrap的某些組件依賴於jQuery,所以請確保下載對應版本的jQuery文件,來保證Bootstrap相關組件運行正常。

 

Bootstrap源碼

Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件,並且還有 LESS、JavaScript 和文檔的源碼。具體來說,主要文件組織結構如下:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/js/ 和 fonts/ 目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/ 目錄包含了上面所說的預編譯 Bootstrap 包內的所有文件。docs/ 包含了所有文檔的源碼文件,examples/ 目錄是 Bootstrap 官方提供的實例工程。除了這些,其他文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。

 

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! -->
    <title>Bootstrap Template</title>

    <!-- 引入你的Bootstrap -->
      <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
  </head>

  <body>
    <h1>你好,世界!</h1>
    <h1>Hello World!</h1>

    <!-- 引入你的jQuery (Bootstrap的所有JavaScript插件都依賴jQuery,所以必須引入且放在前邊) -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

 

Bootstrap全局樣式

排版、按鈕、表格、表單、圖片等我們常用的HTML元素,Bootstrap中都提供了全局樣式。

我們只要在基本的HTML元素上通過設置class就能夠應用上Bootstrap的樣式,從而使我們的頁面更美觀和諧。

標題相關

標題

<h1>一級標題36px</h1>
<h2>二級標題30px</h2>
<h3>三級標題24px</h3>
<h4>四級標題18px</h4>
<h5>五級標題14px</h5>
<h6>六級標題12px</h6>
<!--除了使用h標簽,Bootstrap內置了相應的全局樣式-->
<!--內聯標簽應用標題樣式-->
<span class="h1">一級標題36px</span>
<span class="h2">二級標題30px</span>
<span class="h3">三級標題24px</span>
<span class="h4">四級標題18px</span>
<span class="h5">五級標題14px</span>
<span class="h6">六級標題12px</span>

副標題

<!--一級標題中嵌入小標題-->
<h1>一級標題<small>小標題</small></h1>

文本對齊

<!--文本對齊-->
<p class="text-left">文本左對齊</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右對齊</p>

文本大小寫

<!--大小寫-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

表格

Class 描述
.table-striped 條紋狀表格
.table-bordered 帶邊框的表格
.table-hover 鼠標懸停變色的表格
.table-condensed 緊縮型表格
.table-responsive 響應式表格

狀態類

Class 描述
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動作
.info 標識普通的提示信息或動作
.warning 標識警告或需要用戶注意
.danger 標識危險或潛在的帶來負面影響的動作

表單

內聯表單

表單狀態

帶圖標的表單

按鈕

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按鈕樣式

<!-- Standard button -->
<button type="button" class="btn btn-default">(默認樣式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首選項)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危險)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(鏈接)Link</button>

按鈕大小

<p>
  <button type="button" class="btn btn-primary btn-lg">(大按鈕)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按鈕)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(默認尺寸)Default button</button>
  <button type="button" class="btn btn-default">(默認尺寸)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(小按鈕)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(小按鈕)Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

圖片

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

輔助類

文本顏色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</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>

關閉按鈕

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

<span class="caret"></span>

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

內容塊居中

<div class="center-block">...</div>

清除浮動

<!-- Usage as a class -->
<div class="clearfix">...</div>

顯示與隱藏

<div class="show">...</div>
<div class="hidden">...</div>

常用Bootstrap組件

  1. 字體圖標
  2. 下拉菜單
  3. 按鈕組
  4. 輸入框俎
  5. 導航
  6. 分頁
  7. 標簽和徽章
  8. 頁頭
  9. 縮率圖
  10. 進度條

模擬滾動的進度條:

var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
    clearInterval(theID);
  } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
  }
}
模擬滾動的進度條

響應式開發

為什么要進行響應式開發?

隨着移動設備的流行,網頁設計必須要考慮到移動端的設計。同一個網站為了兼容PC端和移動端顯示,就需要進行響應式開發。

什么是響應式?

利用媒體查詢,讓同一個網站兼容不同的終端(PC端、移動端)呈現不同的頁面布局。

用到的技術

CSS3@media查詢

用於查詢設備是否符合某一特定條件,這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。

常見屬性:

  • device-width, device-height 屏幕寬、高
  • width,height 渲染窗口寬、高
  • orientation 設備方向
  • resolution 設備分辨率

語法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不同的媒體使用不同的stylesheet

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

響應式布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css" rel="stylesheet">
    <style>
        .c1{
            background: red;
        }
        @media (min-width: 600px) {
            .c1{
                background: green;  // 大於600px寬度就顯示綠色
            }
        }
    </style>
</head>
<body>
<div class="c1">
   asdfasdf
</div>
<img src="" alt="">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/carousel.js"></script>
</body>
</html>
View Code

 

viewport

手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),用戶可以通過平移和縮放來看網頁的不同部分。

設置viewport

一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
  • width:控制 viewport 的大小,可以指定的一個值,如果 600,或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
  • height:和 width 相對應,指定高度。
  • initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
  • maximum-scale:允許用戶縮放到的最大比例。
  • minimum-scale:允許用戶縮放到的最小比例。
  • user-scalable:用戶是否可以手動縮放。

Bootstrap的柵格系統

  • container
  • row
  • column

注意事項: 使用Bootstrap的時候不要讓自己的名字與Bootstrap的類名沖突。

 

Bootstrap自帶的常用插件

模態框

注意:

模態框的HTML代碼放置的位置:務必將模態框的HTML代碼放在文檔的最高層級內(也就是說,盡量作為 body 標簽的直接子元素),以避免其他組件影響模態框的展現和/或功能。

<!-- 觸發模態框的按鈕 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <!-- 模態框內容 -->
    <div class="modal-content">
      <div class="modal-header"> <!-- 模態框 標題-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body"> <!-- 模態框 主體內容(可以是表單等等)-->
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

注意:

  • 通過為模態框設置 .bs-example-modal-lg和 .bs-example-modal-sm來控制模態框的大小。
  • 通過 .fade類來控制模態框彈出時的動畫效果(淡入淡出效果)。
  • 通過在 .modal-bodydiv中設置 .row可以使用Bootstrap的柵格系統。

模態框的調用方式:

1.通過data屬性

通過在一個觸發彈出模態框的元素(例如:按鈕)上添加 data-toggle="modal"屬性,然后設置 data-target="#foo"屬性或 href="#foo"屬性,用來指向被控制的模態框。

<button type="button" data-toggle="modal" data-target="#myModal">顯示模態框</button>

 

2.通過JS代碼調用

$('#myModal').modal("show");  // 顯示
$('#myModal').modal("hide")   // 隱藏

 

常用參數:

名稱 可選值 默認值 描述
backdrop true/false/'static' true false表示有沒有遮罩層,'static'表示點擊遮罩層不關閉模態框
keyboard true/false true 鍵盤上的 esc 鍵被按下時關閉模態框。
show true/false true 模態框初始化之后就立即顯示出來。

方法:

$('#myModal').modal({
  keyboard: false
})

 

輪播圖

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可以繼續為圖片添加介紹信息

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

 

設置切換間隔為2秒,默認是5秒。

$('.carousel').carousel({
  interval: 2000
})

 

常用的前端插件合集

FontAwesome字體

詳細用法參見上述站點的Examples。

 

SweetAlert系列

 

SweetAlert示例

基本使用:

  1. swal("標題","內容","success);

使用SweetAlert在Ajax提交成功(done)或失敗(error)時分別提示不用的內容。

這是更新之前版本的寫法

function deleteRecord(recordID) {
    swal({
        title: "確定要刪除這個產品嗎?",
        text: "刪除后可就無法恢復了。",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "是的,我要刪除!",
        confirmButtonColor: "#ec6c62",
        cancelButtonText: "容我三思"
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            type: "post",
            url: "/delete/",
            data: {"id": recordID},
            success: function (data) {
                var dataObj = $.parseJSON(data);
                if (dataObj.status === 0) { //后端刪除成功
                    swal("刪除成功", dataObj.info, "success");
                    $("#p-" + recordID).remove()  //刪除頁面中那一行數據
                } else {
                    swal("出錯啦。。。", dataObj.msg, "error");  //后端刪除失敗
                }
            },
            error: function () {  // ajax請求失敗
                swal("啊哦。。。", "服務器走丟了。。。", "error");
            }
        })
    });
}

 

更新之后用這么寫

swal({
  title: "這里寫標題",
  text: "這里放內容",
  icon: "warning",  // 這里放圖標的類型(success,warning,info,error)
  buttons: {
    cancel: {
      text: "容我三思",
      visible: true,
      value: false
    },
    confirm: {
      text: "我就是要刪除"
    }
  }
}).then(function (isConfirm) {
    if (isConfirm){
      swal("你死定了", {button: "確認"});
    }

 

Toastr通知

toastr["success"]("你已經成功被綠!")

 

jQueryLazyload懶加載

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懶加載示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

 

模板

一個不錯的管理后台模板

 

Bootstrap實例精選

  • 封面圖
  • Carousel
  • 博客頁面
  • 控制台
  • 登錄頁
  • Offcanvas

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF8">
    <meta http-euqiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap登錄驗證</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body style="background-color: #eeeeee;">
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 70px">
            <h2 class="text-center">歡迎登錄</h2>
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">郵箱</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="郵箱">
                    <span class="help-block"></span>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密碼</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密碼">
                    <span class="help-block"></span>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 記住我
                    </label>
                </div>
                <button type="submit" class="btn btn-success btn-block" id="login-btn">登錄</button>
            </form>
        </div>
    </div>

</div>


<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
    // 給登錄按鈕綁定點擊事件
    $("#login-btn").click(function (){
        // 定義一個是否允許提交的標志位
        var flag = true;
         // 1. 找到登錄框中所有的input框,判斷值是否為空
        $(".form-group input").each(function () {
            var Value = $(this).val().trim();
            if (!Value){
                 // 2. 為空就顯示提示信息
                // 2.1 給下面的span標簽設置文本提示信息
                var errorMsg = $(this).prev().text() + "不能為空";
                $(this).next().text(errorMsg);
                // 2.2 給父標簽設置has-error的樣式
                $(this).parent().addClass('has-error');
                 // 2.3 阻止表單提交
                flag = false;
            }
        });
        return flag;
    });
    
    // 給input框綁定focus事件
    $(".form-group input").focus(function (){
         // 1. 清空當前input框后面的span標簽的文本
        $(this).next().text('');
         // 2. 刪除父標簽的has-error樣式
        $(this).parent().removeClass('has-error');
    })

</script>
</body>
</html>
基於Bootstrap的登錄驗證示例

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM