text Slim模板引擎的基本使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text Slim模板引擎的基本使用相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<title>slim template example</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>
Checkout form
</h2>
<p class="lead">
Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
</p>
</div>
<div class="row">
<div class="col-md-8 order-md-1">
<h4 class="mb-3">
Billing address
</h4>
<form class="needs-validation" novalidate="">
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label><input class="form-control" id="firstName" placeholder="" required="" type="text" value="" />
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label><input class="form-control" id="lastName" placeholder="" required="" type="text" value="" />
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<dic class="input-group-prepend"><span class="input-group-text">@</span></dic><input class="form-control" id="username" placeholder="Username" required="" type="text" />
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted"> (Optional) </span></label><input class="form-control" id="email" placeholder="you@example.com" type="email" />
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label><input class="form-control" id="address" placeholder="1234 Main St" required="" type="text" />
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label><select class="custom-select d-block w-100" id="country" required="">
<option value="">
Choose...
</option>
<option>
United States
</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label><select class="custom-select d-block w-100" id="state" required="">
<option value="">
Choose...
</option>
<option>
United States
</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label><input class="form-control" id="zip" placeholder="" required="" type="text" />
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4" />
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="same-address" type="checkbox" /><label class="custom-control-label" for="same-address">Shipping address is the same as my billing address.</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="save-info" type="checkbox" /><label class="custom-control-label" for="save-info">Save this information for next time.</label>
</div>
<hr class="mb-4" />
<h4 class="mb-3">
Payment
</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input checked="" class="custom-control-input" id="credit" name="paymentMethod" required="" type="radio" /><label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input checked="" class="custom-control-input" id="debit" name="paymentMethod" required="" type="radio" /><label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input checked="" class="custom-control-input" id="paypal" name="paymentMethod" required="" type="radio" /><label class="custom-control-label" for="paypal">Paypal card</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label><input class="form-control" id="cc-name" placeholder="" required="" type="text" /><small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label><input class="form-control" id="cc-name" placeholder="" required="" type="text" /><small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label><input class="form-control" id="cc-expiration" placeholder="" required="" type="text" />
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label><input class="form-control" id="cc-cvv" placeholder="" required="" type="text" />
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4" />
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span><span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">
Product name
</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">
Second product
</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">
Third item
</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">
Promo code
</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span><strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input class="form-control" placeholder="Promo code" type="text" />
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Redeem</button>
</div>
</div>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small"></footer>
</div>
</body>
<script>
(function () {
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js" type="text/javascript"></script>
</html>
doctype html
html lang="en" dir="ltr"
head
meta charset="utf-8"
title slim template example
link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"
body
div class="container"
div class="py-5 text-center"
h2 Checkout form
p class="lead" Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
div class="row"
div class="col-md-8 order-md-1"
h4 class="mb-3" Billing address
form class="needs-validation" novalidate=true
div class="row"
div class="col-md-6 mb-3"
label for="firstName" First name
input type="text" class="form-control" id="firstName" placeholder=true value=true required=true
div class="invalid-feedback" Valid first name is required.
div class="col-md-6 mb-3"
label for="lastName" Last name
input type="text" class="form-control" id="lastName" placeholder=true value=true required=true
div class="invalid-feedback" Valid last name is required.
div class="mb-3"
label for="username" Username
div class="input-group"
dic class="input-group-prepend"
span class="input-group-text" @
input type="text" class="form-control" id="username" placeholder="Username" required=true
div class="invalid-feedback" style="width: 100%;" Your username is required.
div class="mb-3"
label for="email" Email <span class="text-muted"> (Optional) </span>
input type="email" class="form-control" id="email" placeholder="you@example.com"
div class="invalid-feedback" Please enter a valid email address for shipping updates.
div class="mb-3"
label for="address" Address
input type="text" class="form-control" id="address" placeholder="1234 Main St" required=true
div class="invalid-feedback" Please enter your shipping address.
div class="row"
div class="col-md-5 mb-3"
label for="country" Country
select class="custom-select d-block w-100" id="country" required=true
option value=true Choose...
option United States
div class="invalid-feedback" Please select a valid country.
div class="col-md-4 mb-3"
label for="state" State
select class="custom-select d-block w-100" id="state" required=true
option value=true Choose...
option United States
div class="invalid-feedback" Please provide a valid state.
div class="col-md-3 mb-3"
label for="zip" Zip
input type="text" class="form-control" id="zip" placeholder=true required=true
div class="invalid-feedback" Zip code required.
hr class="mb-4"
div class="custom-control custom-checkbox"
input type="checkbox" class="custom-control-input" id="same-address"
label class="custom-control-label" for="same-address" Shipping address is the same as my billing address.
div class="custom-control custom-checkbox"
input type="checkbox" class="custom-control-input" id="save-info"
label class="custom-control-label" for="save-info" Save this information for next time.
hr class="mb-4"
h4 class="mb-3" Payment
div class="d-block my-3"
div class="custom-control custom-radio"
input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked=true required=true
label class="custom-control-label" for="credit" Credit card
div class="custom-control custom-radio"
input id="debit" name="paymentMethod" type="radio" class="custom-control-input" checked=true required=true
label class="custom-control-label" for="debit" Debit card
div class="custom-control custom-radio"
input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" checked=true required=true
label class="custom-control-label" for="paypal" Paypal card
div class="row"
div class="col-md-6 mb-3"
label for="cc-name" Name on card
input type="text" class="form-control" id="cc-name" placeholder=true required=true
small class="text-muted" Full name as displayed on card
div class="invalid-feedback" Name on card is required
div class="col-md-6 mb-3"
label for="cc-number" Credit card number
input type="text" class="form-control" id="cc-name" placeholder=true required=true
small class="text-muted" Full name as displayed on card
div class="invalid-feedback" Name on card is required
div class="row"
div class="col-md-3 mb-3"
label for="cc-expiration" Expiration
input type="text" class="form-control" id="cc-expiration" placeholder=true required=true
div class="invalid-feedback" Expiration date required
div class="col-md-3 mb-3"
label for="cc-cvv" CVV
input type="text" class="form-control" id="cc-cvv" placeholder=true required=true
div class="invalid-feedback" Security code required
hr class="mb-4"
button class="btn btn-primary btn-lg btn-block" type="submit" Continue to checkout
div class="col-md-4 order-md-2 mb-4"
h4 class="d-flex justify-content-between align-items-center mb-3"
span class="text-muted" Your cart
span class="badge badge-secondary badge-pill" 3
ul class="list-group mb-3"
li class="list-group-item d-flex justify-content-between lh-condensed"
div
h6 class="my-0" Product name
small class="text-muted" Brief description
span class="text-muted" $12
li class="list-group-item d-flex justify-content-between lh-condensed"
div
h6 class="my-0" Second product
small class="text-muted" Brief description
span class="text-muted" $8
li class="list-group-item d-flex justify-content-between lh-condensed"
div
h6 class="my-0" Third item
small class="text-muted" Brief description
span class="text-muted" $5
li class="list-group-item d-flex justify-content-between bg-light"
div class="text-success"
h6 class="my-0" Promo code
small EXAMPLECODE
span class="text-success" -$5
li class="list-group-item d-flex justify-content-between"
span Total (USD)
strong $20
form class="card p-2"
div class="input-group"
input type="text" class="form-control" placeholder="Promo code"
div class="input-group-append"
button type="submit" class="btn btn-secondary" Redeem
footer class="my-5 pt-5 text-muted text-center text-small"
javascript:
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"
script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"
以上是关于text Slim模板引擎的基本使用的主要内容，如果未能解决你的问题，请参考以下文章
Go Web编程实战（10）----模板引擎库text/template包的使用