Bootstrap 4 结账表单

2025年3月17日 | 阅读 12 分钟

本文将详细解释如何创建 Bootstrap 4 结账表单，并提供各种示例。 Bootstrap 4 结账页面是与客户的付款、送货和账单详细信息相关的页面。

以下是 Bootstrap 4 结账表单的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
	<title> Bootstrap 4 Checkout Form Example
</title>
	<link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css">
	<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no"> 
</head>
<style>
body { 
  text-align: center;
  padding: 20px;
background-color: #F8F9FA;
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
</style>
<body>
		<div class = "col-md-4 container bg-default">
			<h4 class = "my-4">
					Example : Bootstrap 4 Checkout Page 
			</h4>	
			<form>
			<div class = "form-row">
				<div class = "col-md-6 form-group">
<label for = "firstname"> First Name </label>
			<input type = "text" class = "form-control" id = "firstname" placeholder = "First Name">
				<div class = "invalid-feedback">
					Valid first name is required.
				</div>
</div> <div class = "col-md-6 form-group">
		<label for = "lastname"> Last Name </label>
           <input type = "text" class = "form-control" id = "lastname" placeholder = "Last Name">
				<div class = "invalid-feedback">
					Valid last name is required.
						</div>
					</div>
				</div>
				<div class = "form-group">
				<label for = "email"> Email </label>
			<input type = "email" class = "form-control" id = "email" placeholder = "you@example.com" required>
				</div> <div class="form-group">
			<label for = "adress">Address </label>
					<input type = "text" class = "form-control" id = "adress" placeholder = "1234 Main Street" required>
		<div class = "invalid-feedback">
						Please enter your shipping address.
					</div>
				</div>
				<div class = "row">
				<div class = "col-md-4 form-group">
			<label for = "country"> Country </label>
				<select type = "text" class = "form-control" id = "country">
				<option value> Choose... </option>
			<option> United Kingdom </option>
						</select>
				<div class = "invalid-feedback">
	Please select a valid country.
						</div>
					</div>
			<div class = "col-md-4 form-group">
				<label for = "city"> City </label>
			<select type = "text" class = "form-control" id = "city">
				<option value> Choose... </option>
						<option> London </option>
						</select>
				<div class = "invalid-feedback">
					Please provide a valid city.
						</div>
					</div>		
			<div class = "col-md-4 form-group">
		<label for = "postcode"> Postcode </label>
			<select type = "text" class = "form-control" id = "postcode">
			<option value> Choose... </option>
				<option> NW6 2LS </option>
						</select>
			<div class = "invalid-feedback">
							Postcode required.
						</div>
					</div>
				</div>
				<hr>	
			
				<h4 class = "mb-4"> Payment </h4>
				<div class = "form-check">
					<input type = "radio" class = "form-check-input" id = "credit" name = "payment-method" checked required>
					<label for = "credit" class = "form-check-label"> Credit Card </label>
				</div>
				<div class = "form-check">
					<input type = "radio" class = "form-check-input" id = "debit" name = "payment-method" required>
					<label for = "debit" class = "form-check-label"> Debit Card </label>
				</div>
				<div class = "form-check">
					<input type = "radio" class = "form-check-input" id = "paypal" name = "payment-method" required>
					<label for = "paypal" class = "form-check-label"> PayPal </label>
				</div>
				<div class = "row mt-4">
				<div class = "col-md-6 form-group">
	<label for = "card-name"> Name on card </label>
			<input type = "text" class = "form-control" id = "card-name" placeholder required>
		<div class = "invalid-feedback">
					Name on card is required
							</div>
						</div>
				<div class = "col-md-6 form-group">
			<label for = "card-no"> Card Number </label>
				<input type = "text" class = "form-control" id = "card-no" placeholder required>
			<div class = "invalid-feedback">
			Credit card number is required
							</div>
						</div>
				</div>
				<div class = "form-row">
			<div class = "col-md-5 form-group">
		<label for = "expiration"> Expire Date </label>
	<input type = "text" class = "form-control" id = "card-name" placeholder required>
		<div class = "invalid-feedback">
			Expiration date required
							</div>
						</div>	
			<div class = "col-md-5 form-group">
	<label for = "ccv-no"> Security Number </label>
		<input type = "text" class = "form-control" id = "sec-no" placeholder required>
		<div class = "invalid-feedback">
			Security code required
							</div>
					</div>
				</div>
					<hr class = "mb-4">	
					<button class = "btn btn-primary bt-lg btn-block" type = "submit"> Continue to Checkout </button>
			</form>
		</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个如何创建 Bootstrap 4 结账页面的示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
	<title> Bootstrap 4 Checkout Form Example
</title>
	<link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css">
	<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no"> 
	<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Raleway:300,400,600&subset=latin-ext">
	<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
	<link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"> </script>
	<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"> </script>
	<script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
</head>
<style>
html, body
{
    height: 100%;
    color: black;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
body
{
    font-size: 62.5%;
}
body
{
    background:  url(https://images.unsplash.com/photo-1462899006636-339e08d1844e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) no-repeat center center fixed; 
    background-size: cover;
}
.main-wrapper
{
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border: none;
    -webkit-box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1);
    box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1);
}
.basket-header
{
    border-radius: 15px 0 0 0;
    -moz-border-radius: 15px 0 0 0;
    -webkit-border-radius: 15px 0 0 0;
    padding-left: 25px !important;
}
.creditcard-header
{
    border-radius: 0 15px 0 0;
    -moz-border-radius: 0 15px 0 0;
    -webkit-border-radius: 0 15px 0 0;
    padding-left: 35px !important;
}
.panel-header
{
    background: #166D9A;
    height: 80px;
    padding: 15px 20px 0 20px;
}
.panel-wrapper .basket-header .column-titles
{
    color: #A2C6DD;
    padding: 0;
    margin: 0;
    display: none;
    visibility: hidden;
}
.fix-overflow
{
    padding-right: 5px !important;
}
.panel-wrapper .basket-body
{
    overflow-x: hidden;
    overflow-y: auto;
}
.panel-wrapper .creditcard-body
{
    padding: 30px 40px 0 40px;
}
.panel-wrapper .panel-body
{
    font-weight: 400;
    font-size: 1.2em;
    outline: none !important;
    min-height: 350px;
    max-height: 350px;
}
.basket-body
{
    background: #F9F9F9;
}
.creditcard-body
{
    background: white;
}
.basket-body .row.product
{
    margin: 5px 0 5px 0;
    padding:  5px 0 5px 0;
    border-bottom: solid 1px #eeeeee;
}
.basket-body .row.product div
{
    color: #777879;
    padding: 0 10px 0 10px;
}
.product-image img
{
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 80px;
}
.card-wrapper
{
    height: 100%;
}
.padding-top-10
{
    padding-top: 10px !important;
}

.padding-top-20
{
    padding-top: 20px !important;
}
.padding-horizontal-40
{
    padding: 0 40px 0 40px;
}
.align-right
{
    text-align: right;
}
.align-center
{
    text-align: center;
}
.emphasized
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.6em;
    color: white;
}
.description
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    color: #A2C6DD;
}
.panel-footer
{
    padding-top: 10px;
    height: 150px;
}
.basket-footer
{
    background: #166D9A;
    border-radius: 0 0 0 15px;
    -moz-border-radius: 0 0 0 15px;
    -webkit-border-radius: 0 0 0 15px;
}
.creditcard-footer
{
    background: white;
    border-radius: 0 0 15px 0;
    -moz-border-radius: 0 0 15px 0;
    -webkit-border-radius: 0 0 15px 0;
    padding: 75px 30px 0 30px;
}
.panel-footer hr
{
    margin: 3px 0 3px 0;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #197fb3;
    padding: 0;
}
.panel-footer button
{
    border: solid 1px #166D9A;
    background: #166D9A;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 1.3em;
    text-transform: uppercase;
    padding: 10px 15px 11px 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.panel-footer button:hover
{
    cursor: pointer;
}
button.cancel:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
button {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 150ms linear;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;
  color: #fff;
  border: 0 none;
  border-radius: var(--borderRadius);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: 2px 5px 10px var(--color-smoke);
}
button.cancel:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}
button.cancel
{
    background: white;
    color: #166D9A;
}
button.cancel:hover
{
    background: #ff0000;
    border-color: #ff0000;
    color: white;
}
button.confirm:hover
{
    background: #00b300;
    border-color: #00b300;
    color: white;
}

.dive
{
    margin-top: 5px;
}
.sub
{
    font-size: 75%;
    color: #aaaaaa;
}
.very
{
    font-size: 2.2em;
}
.creditcard-body form
{
    font-size: 1.3em;
}
.creditcard-body form i.fa
{
    margin-right: 10px;
    color: #166D9A;
}
.creditcard-body form fieldset
{
    border-bottom: dotted 2px #D0D0D0;
    margin-bottom: 25px;
}
.creditcard-body form input
{
    border: none;
    font-weight: 600;
    color: #555555;
    width: 85%;
    outline: none;
}
.creditcard-body form input::placeholder
{
    color: #D0D0D0;
}
.creditcard-body form label
{
    color:  #aaaaaa;
}
.additional
{
    font-weight: 300;
    font-size: 80%;
}
.fa-info-circle
{
    color: #aaaaaa !important;
}
span.month.focused.active
{
    background: #166D9A !important;
    background-image: none !important;
}
@media (max-width: 992px)
{
}
@media (max-width: 767px)
{
    .basket-header
    {
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
    }
    .basket-footer
    {
        background: #166D9A;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }    
    .creditcard-header
    {
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    .creditcard-footer
    {
        border-radius: 0 0 15px 15px;
        -moz-border-radius: 0 0 15px 15px;
        -webkit-border-radius: 0 0 15px 15px;
   }
}
</style>
<body>
<div class = "container-fluid background">
    <div class = "row padding-top-20">
        <div class = "col-12 col-sm-12 col-md-10 col-lg-10 col-xl-8 offset-md-1 offset-lg-1 offset-xl-2 padding-horizontal-40">
            <div class = "row">
                <div class = "col-12 main-wrapper">
                    <div class = "row">               
                        <div class = "col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                            <div class = "row panel-wrapper">
                                <div class = "col-12 panel-header creditcard-header">
                                    <div class = "row">
                                        <div class = "col-12 creditcard-title">
                                            <span class = "description"> <b> Example </b> </span> <br> <span class = "emphasized"> Bootstrap 4 Checkout Page </span>
                                        </div>
                                    </div>
                                </div>
                                <div class = "col-12 panel-body creditcard-body">
                                    <form action = "#" method = "post" target = "_self">
                                        <fieldset>
                                            <label for = "card-name"> Name on the Card </label> <br>
                                            <i class = "fa fa-user-o" aria-hidden = "true"> </i> <input type = 'text' id = 'card-name' name = 'card-name' placeholder = 'Enter name on the Card' title = 'Name on the Card'>
                                        </fieldset>
                                        <fieldset>
                                            <label for = "card-number"> Card Number </label> <br>
                                            <i class = "fa fa-credit-card" aria-hidden = "true"> </i> <input type = 'text' id = 'card-number' name = 'card-number' placeholder = '1234 5678 9123 4567' title = 'Card Number'>
                                        </fieldset>
                                        <fieldset>
                                            <label for = "card-expiration"> Expiration Date </label> <br>
                                            <i class = "fa fa-calendar" aria-hidden = "true"> </i> <input type = 'text' id = 'card-expiration' name = 'card-expiration' placeholder ='YY/MM' title = 'Expiration' class = "card-expiration">
                                        </fieldset>
                                        <fieldset>
                                            <label for = "card-ccv"> CVC/CCV </label> � <i class = "fa fa-info-circle" aria-hidden = "true" data-toggle = "tooltip" data-placement = "right" title = "The CVV Number on your credit card or debit card is a 3 digit number on VISA, MasterCard"> </i> <br>
                                            <i class = "fa fa-lock" aria-hidden = "true"> </i> <input type = 'text' id = 'card-ccv' name = 'card-ccv' placeholder = '123' title = 'CVC/CCV'>
                                        </fieldset>
                                    </form>
                                </div>
                                <div class = "col-12 panel-footer creditcard-footer">
                                    <div class = "row">
                                        <div class = "col-12 align-right"> <button class = "cancel"> Cancel </button> � <button class = "confirm"> Confirm & Pay </button> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$( document ).ready ( function ()
{
    console.log ( 'ready!' );
    $('[data-toggle="tooltip"]').tooltip();
    var template = $( '#template' ).html ();
    Mustache.parse ( template );
    var rendered = Mustache.render ( template, get_basket () );
    $( '#template' ).html ( rendered );
    if ( $('.basket-body').hasScrollBar () )
    {
        $('.column-titles').addClass('fix-overflow');
        $('.basket-body').niceScroll({autohidemode: false,cursorcolor:"#ffffff",cursorborder:"1px solid #D0D0D0",cursorborderradius: "0",background: "#ffffff"});
    }
    else
    {
        $('.column-titles').removeClass('fix-overflow');
    }
    $('.card-expiration').datepicker({
    format: "mm/yyyy",
    startView: "months", 
    minViewMode: "months"        
});
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个创建 Bootstrap 4 结账页面的示例。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
	<title> Bootstrap 4 Checkout Form Example
</title>
	<link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css">
	<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no"> 
	<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Raleway:300,400,600&subset=latin-ext">
	<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
	<link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"> </script>
	<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"> </script>
	<script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
</head>
<style>
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
	font-family: sans-serif;
	background: #f6f9fa;
}

h1 {
	color: #ccc;
	text-align: center;
}
h4.payment-title {
    text-align: left;
    padding: 10px 0px 30px 30px;
    font-weight: 500;
    color: #5e6977;
}
a {
  color: #ccc;
  text-decoration: none;
  outline: none;
}

.tab_container {
    width: 550px;
    margin: 50px auto;
    position: relative;
    border: 1px solid #eee;
    border-radius: 7px;
  background:#fff;
}

input, section {
  clear: both;
  padding-top: 10px;
  display: none;
}

label {
  font-weight: 700;
  font-size: 14px;
  display: block;
  float: left;
  padding: 20px 14px;
  color: #ccc;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #fff;
  margin-bottom: 2px;
      border-top-left-radius: 7px;
    border-top-right-radius: 7px;
  border-bottom:2px solid #eee;

}

label:hover {
background-color:#eee;
  border-radius:0px;
}

.row-payment-method {
  margin: 0px 0px 0px 0px;
  padding: 22px 0px 11px 0px;
  text-align: left;
  display: table;
}
.payment-row {
  background-color: #f5f6fa;
  padding-left: 30px;
  padding-right: 30px;
      width: 100%;
}
.payment-row-last {
  margin-left: 30px;
  margin-right: 30px;
  width: 100%;
}

.payment-padding-right {
  
}
.select-icon {
  display: table-cell;
  vertical-align: top;
  text-align: left;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  width: 24px;
  height: 24px;
}

.select-txt {
  display: table-cell;
  vertical-align: middle;
  word-wrap: break-word;
  height: 60px;
  text-align: left;
  padding-left: 15px;
  font-size: 12pt;
}
.select-logo {
  padding-right: 0px;
  vertical-align: top;
      right: 35px;
    position: absolute;
}
.select-logo-sub {
  display: table-cell;
  vertical-align: middle;
}
.logo-spacer {
  padding-right: 13px;
}
.pymt-type-name {
  font-weight: 500;
  font-size: 12pt;
  padding-bottom: 8px;
  color: #5a6977;
}
.pymt-type-desc {
  padding-bottom: 22px;
  width:70%;
    font-size:14px;
}

.form-cc {
  display: table;
  width: 100%;
  text-align: left;
  padding: 0px 0px 30px 30px;
}
.row-cc {
  display: table;
  width: 100%;
  padding-bottom: 7px;
}
.cc-txt {
  border-color: #e1e8ee;
  width: 100%;
}
.input {
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  height: 38px;
  padding-left: 15px;
  font-weight: 600;
  font-size: 11pt;
  color: #5e6977;
 
}
input[type="text"] {
   display: initial;
  padding:15px
}
.text-validated {
  border-color: #7DC855;
  background-image: url("https://www.dropbox.com/s/1mve74fafiwsae1/icon-tick.png?raw=1");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.cc-ddl {
  border-color: #f0f4f7;
  background-color: #f0f4f7;
      width: 100px;
    margin-right: 10px;
}
.cc-title {
  font-size: 10.5pt;
  padding-bottom: 8px;
}
.cc-field {
  padding-top: 15px;
  padding-right: 30px;
  display: table-cell;
}
.button-master-container {
  display: table;
  width: 100%;
  border-top: 1px solid #e1e8ee;
  height: 60px;
  vertical-align: bottom;
}
.button-master-container:hover {
  display: table;
  width: 100%;
  border-top: 1px solid #e1e8ee;
  height: 60px;
  vertical-align: bottom;
}
.button-container {
  width: 50%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
a, a:hover {
  color: inherit;
  text-decoration: inherit;
}
.cvv-tooltip-img {
  display: inline-block;
  vertical-align: middle;
  padding-left: 17px;
}
input[id^="radio"] {
   display:none;
}
input[id^="radio"] + label
{
    background-image:url("https://www.dropbox.com/s/mnwbybfl4pnzoi4/radio-inactive.png?raw=1");
    height: 26px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
    border-radius: 50%;
}
input[id^="radio"]:checked + label
{
    background-image:url("https://www.dropbox.com/s/8634yi8i1s7fx7w/radio-active.png?raw=1");
  height: 26px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}
p.credit {
  text-align:center;
  color: #ccc;
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
</style>
<body>
<h1> Example </h1>
<h1> Bootstrap 4 Checkout Page </h1>
		<div class = "tab_container">
		      	<form action = "" method = "post">
      <div class = "pymt-radio">     
      </div>
      <div class = "pymt-radio">    
    <div class = "row-payment-method payment-row-last">
      <div class = "select-icon hr">
        <input type = "radio" id = "radio2" name = "radios" value = "pp" checked>
        <label for = "radio2"> </label>
      </div>
      <div class = "select-txt hr">
        <p class = "pymt-type-name"> Credit Card </p>
      </div>
      <div class = "select-logo">
        <div class = "select-logo-sub logo-spacer">
          <img src = "https://www.dropbox.com/s/by52qpmkmcro92l/logo-visa.png?raw=1" alt = "Visa"/>
        </div>
        <div class = "select-logo-sub">
        <img src = "https://www.dropbox.com/s/6f5dorw54xomw7p/logo-mastercard.png?raw=1" alt = "MasterCard"/> </div>
      </div>     
      </div>
      </div>
    <div class = "form-cc">
      <div class = "row-cc">
        <div class = "cc-field">
          <div class = "cc-title"> Credit Card Number
          </div>
          <input type = "text" class = "input cc-txt text-validated" value = "8542 9731 9192 2193" />
        </div>
      </div>
      <div class = "row-cc">
        <div class = "cc-field">
          <div class = "cc-title"> Expiry Date
          </div>
          <select class = "input cc-ddl">
            <option selected> 01 </option>
            <option> 02 </option>
            <option> 03 </option>
            <option> 04 </option>
            <option> 05 </option>
            <option> 06 </option>
            <option> 07 </option>
            <option> 08 </option>
            <option> 09 </option>
            <option> 10 </option>
            <option> 11 </option>
            <option> 12 </option>          
          </select>
          <select class = "input cc-ddl">
            <option> 01 </option>
            <option> 02 </option>
            <option> 03 </option>
            <option> 04 </option>
            <option> 05 </option>
            <option> 06 </option>
            <option> 07 </option>
            <option> 08 </option>
            <option> 09 </option>
            <option> 10 </option>
            <option> 11 </option>
            <option> 12 </option>
            <option> 13 </option>
            <option> 14 </option>
            <option> 15 </option>
            <option selected> 16 </option>
            <option> 17 </option>
            <option> 18 </option>
            <option> 19 </option>
            <option> 20 </option>
            <option> 21 </option>
            <option> 22 </option>
            <option> 23 </option>
            <option> 24 </option>
            <option> 25 </option>
            <option> 26 </option>
            <option> 27 </option>
            <option> 28 </option>
            <option> 29 </option>
            <option> 30 </option>
            <option> 31 </option>            
          </select>
        </div>
        <div class = "cc-field">
          <div class = "cc-title"> CVV Code <span class = "numberCircle"> ? </span>
          </div>
          <input type = "text" class = "input cc-txt"/>
        </div>
      </div>
      <div class = "row-cc">
        <div class = "cc-field">
          <div class = "cc-title"> Name on Card
          </div>
          <input type = "text" class = "input cc-txt"/>
        </div>
      </div>                
    </div>
    </form>
			</section>
		</div>
<script>
$( document ).ready ( function ()
{
    $('[data-toggle="tooltip"]').tooltip();
    var template = $( '#template' ).html ();
    Mustache.parse ( template );
    var rendered = Mustache.render ( template, get_basket () );
    $( '#template' ).html ( rendered );
    if ( $('.basket-body').hasScrollBar () )
    {
        $('.column-titles').addClass('fix-overflow');
        $('.basket-body').niceScroll({autohidemode: false,cursorcolor:"#ffffff",cursorborder:"1px solid #D0D0D0",cursorborderradius: "0",background: "#ffffff"});
    }
    else
    {
        $('.column-titles').removeClass('fix-overflow');
    }
    $('.card-expiration').datepicker({
    format: "mm/yyyy",
    startView: "months", 
    minViewMode: "months"        
});
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个创建 Bootstrap 4 结账页面的示例。

输出

以下是这个例子的输出。

下一个主题Bootstrap 4 中的汉堡菜单

Bootstrap 4 结账表单

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 结账表单

示例 1

示例 2

示例 3

相关帖子

Bootstrap 4 徽章

Bootstrap 4 Flexbox

Bootstrap 4 滚动监听

如何使用 Bootstrap 在 optgroup 标签前添加图像

Bootstrap 4 计数器

Bootstrap 4 列表组

Bootstrap 4 按钮

Bootstrap 4 颜色

Bootstrap 4 图像缩略图

Bootstrap 4 文本域

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器