definicao de layout
This commit is contained in:
409
public/assets/pug/pages/template/base-input.pug
Normal file
409
public/assets/pug/pages/template/base-input.pug
Normal file
@@ -0,0 +1,409 @@
|
||||
- var theme_customizer = true;
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Base inputs
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Controls
|
||||
li.breadcrumb-item.active Base Inputs
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic form control
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput1') Email address
|
||||
input#exampleFormControlInput1.form-control(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword2') Password
|
||||
input#exampleInputPassword2.form-control(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect9') Example select
|
||||
select#exampleFormControlSelect9.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect3') Example multiple select
|
||||
select#exampleFormControlSelect3.form-select.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea4') Example textarea
|
||||
textarea#exampleFormControlTextarea4.form-control(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic HTML input control
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Simple Input
|
||||
.col-sm-9
|
||||
input.form-control(type='text')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Placeholder
|
||||
.col-sm-9
|
||||
input.form-control(type='text', placeholder='Type your title in Placeholder')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Password
|
||||
.col-sm-9
|
||||
input.form-control(type='password', placeholder='Password input')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Number
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='number', placeholder='Number')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Telephone
|
||||
.col-sm-9
|
||||
input.form-control.m-input.digits(type='tel', value='91-(999)-999-999')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label URL
|
||||
.col-sm-9
|
||||
input.form-control(type='url', value='https://getbootstrap.com')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Date and time
|
||||
.col-sm-9
|
||||
input#example-datetime-local-input.form-control.digits(type='datetime-local', value='2018-01-19T18:45:00')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Date
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='date', value='2018-01-01')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Month
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='month', value='2018-01')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Week
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='week', value='2018-W09')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Time
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='time', value='21:45:00')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label.pt-0 Color picker
|
||||
.col-sm-9
|
||||
input.form-control.form-control-color(type='color', value='#24695c')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label
|
||||
| Maximum
|
||||
| Length
|
||||
.col-sm-9
|
||||
input.form-control(type='text', placeholder='Content must be in 6 characters', maxlength='6')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label.pt-0 Static Text
|
||||
.col-sm-9
|
||||
.form-control-static
|
||||
| Hello !... This is
|
||||
| static text
|
||||
.row
|
||||
label.col-sm-3.col-form-label Textarea
|
||||
.col-sm-9
|
||||
textarea.form-control(rows='5', cols='5', placeholder='Default textarea')
|
||||
.card-footer.text-end
|
||||
.col-sm-9.offset-sm-3
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Edges input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput5') Email address
|
||||
input#exampleFormControlInput5.form-control.btn-pill(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword6') Password
|
||||
input#exampleInputPassword6.form-control.btn-pill(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect7') Example select
|
||||
select#exampleFormControlSelect7.form-select.btn-pill.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect8') Example multiple select
|
||||
select#exampleFormControlSelect8.form-select.btn-pill.p-l-45.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea9') Example textarea
|
||||
textarea#exampleFormControlTextarea9.form-control.btn-pill(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Flat input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput10') Email address
|
||||
input#exampleFormControlInput10.form-control.btn-square(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword11') Password
|
||||
input#exampleInputPassword11.form-control.btn-square(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect12') Example select
|
||||
select#exampleFormControlSelect12.form-select.btn-square.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect13') Example multiple select
|
||||
select#exampleFormControlSelect13.form-select.btn-square.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea14') Example textarea
|
||||
textarea#exampleFormControlTextarea14.form-control.btn-square(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Raise input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput15') Email address
|
||||
input#exampleFormControlInput15.form-control.input-air-primary(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword16') Password
|
||||
input#exampleInputPassword16.form-control.input-air-primary(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect17') Example select
|
||||
select#exampleFormControlSelect17.form-select.input-air-primary.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect18') Example multiple select
|
||||
select#exampleFormControlSelect18.form-select.input-air-primary.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea19') Example textarea
|
||||
textarea#exampleFormControlTextarea19.form-control.input-air-primary(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Solid input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput20') Email address
|
||||
input#exampleFormControlInput20.form-control(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword21') Password
|
||||
input#exampleInputPassword21.form-control(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword22') Disabled
|
||||
input#exampleInputPassword22.form-control(type='text', disabled='', placeholder='Disabled')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect23') Example select
|
||||
select#exampleFormControlSelect23.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect24') Example multiple select
|
||||
select#exampleFormControlSelect24.form-select.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea25') Example textarea
|
||||
textarea#exampleFormControlTextarea25.form-control(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Input sizing
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='colFormLabelSm26') Large input
|
||||
input#colFormLabelSm26.form-control.form-control-lg(type='text', placeholder='col-form-label-lg')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword27') Default input
|
||||
input#exampleInputPassword27.form-control(type='text', placeholder='form-control')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='colFormLabelSm28') Small input
|
||||
input#colFormLabelSm28.form-control.form-control-sm(type='text', placeholder='col-form-label-sm')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect29') Large select
|
||||
select#exampleFormControlSelect29.form-select.form-control-lg.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect30') Default select
|
||||
select#exampleFormControlSelect30.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlSelect31') Small select
|
||||
select#exampleFormControlSelect31.form-select.form-control-sm.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Custom controls
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Upload File
|
||||
.col-sm-9
|
||||
input.form-control(type='file')
|
||||
.row
|
||||
.col
|
||||
.row
|
||||
label.col-sm-3.col-form-label Custom select
|
||||
.col-sm-9
|
||||
select.custom-select.form-select
|
||||
option(selected='') Open this select menu
|
||||
option(value='1') One
|
||||
option(value='2') Two
|
||||
option(value='3') Three
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
Reference in New Issue
Block a user