smart bootstrap
v6.0.0
npm install @ smarthtmlelemnets / smart - bootstrap 將樣式表複製到所有其他示例示例之前，以加載我們的CSS。
< link rel =" stylesheet " href =" src/styles/smart.bootstrap.css " >或者
import 'src/styles/smart.bootstrap.css'; < script src =" src/smart.element.js " > </ script >
< script src =" src/smart.bootstrap.js " > </ script >或者
import 'src/smart.element.js'
import 'src/smart.bootstrap.js'該軟件包通過添加材料設計和CSS3變量來擴展引導程序。
Boostrap組件是從頭開始重寫的，並通過使用Smart Framework作為Web組件構建。
Bootstrap SCSS已用CSS3變量重寫，並添加了材料設計。
演示↗
材料設計引導按鈕Web組件
< bootstrap-button style-mode =" primary " > Primary </ bootstrap-button >
< bootstrap-button style-mode =" secondary " > Secondary </ bootstrap-button >
< bootstrap-button style-mode =" success " > Success </ bootstrap-button >
< bootstrap-button style-mode =" danger " > Danger </ bootstrap-button >
< bootstrap-button style-mode =" warning " > Warning </ bootstrap-button >
< bootstrap-button style-mode =" info " > Info </ bootstrap-button >
< bootstrap-button style-mode =" light " > Light </ bootstrap-button >
< bootstrap-button style-mode =" dark " > Dark </ bootstrap-button >
< bootstrap-button style-mode =" link " > Link </ bootstrap-button >材料設計引導複選框Web組件
< bootstrap-check-box checked > Checked </ bootstrap-check-box >
< bootstrap-check-box > Unchecked </ bootstrap-check-box >材料設計引導打開按鈕Web組件
< bootstrap-radio-button checked > Active </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >材料設計引導下拉網絡組件
< bootstrap-drop-down label =" Dropdown button " >
< a class =" dropdown-item " href =" # " > Action </ a >
< a class =" dropdown-item " href =" # " > Another action </ a >
< a class =" dropdown-item " href =" # " > Something else here </ a >
</ bootstrap-drop-down >材料設計bootstrap拆分按鈕Web組件
< bootstrap-split-button label =" Dropdown button " >
< a class =" dropdown-item " href =" # " > Action </ a >
< a class =" dropdown-item " href =" # " > Another action </ a >
< a class =" dropdown-item " href =" # " > Something else here </ a >
</ bootstrap-split-button >材料設計引導程序輸入組Web組件
< bootstrap-input-group class =" mb-3 " >
< span class =" input-group-text " id =" basic-addon1 " > @ </ span >
< input type =" text " class =" form-control " placeholder =" Username " aria-label =" Username "
aria-describedby =" basic-addon1 " >
</ bootstrap-input-group >
< bootstrap-input-group class =" mb-3 " >
< input type =" text " class =" form-control " placeholder =" Recipient's username "
aria-label =" Recipient's username " aria-describedby =" basic-addon2 " >
< span class =" input-group-text " id =" basic-addon2 " > @example.com </ span >
</ bootstrap-input-group >
< label for =" basic-url " > Your vanity URL </ label >
< bootstrap-input-group class =" mb-3 " >
< span class =" input-group-text " id =" basic-addon3 " > https://example.com/users/ </ span >
</ bootstrap-input-group >
< bootstrap-input-group class =" mb-3 " >
< span class =" input-group-text " > $ </ span >
< input type =" text " class =" form-control " aria-label =" Amount (to the nearest dollar) " >
< span class =" input-group-text " > .00 </ span >
</ bootstrap-input-group >
< bootstrap-input-group >
< span class =" input-group-text " > With textarea </ span >
< textarea class =" form-control " aria-label =" With textarea " > </ textarea >
</ bootstrap-input-group >材料設計引導模式Web組件
< bootstrap-modal id =" exampleModalLive " class =" fade " >
< div class =" modal-header " >
< h5 class =" modal-title " id =" exampleModalLabel " > Modal title </ h5 >
< button type =" button " class =" close " data-dismiss =" modal " aria-label =" Close " >
< span aria-hidden =" true " > × </ span >
</ button >
</ div >
< div class =" modal-body " >
< p > Modal body text goes here. </ p >
</ div >
< div class =" modal-footer " >
< button type =" button " class =" btn btn-secondary " data-dismiss =" modal " > Close </ button >
< button type =" button " class =" btn btn-primary " > Save changes </ button >
</ div >
</ bootstrap-modal >材料設計Bootstrap選項卡Web組件
< bootstrap-tabs style-mode =" warning " role =" tablist " >
< a class =" nav-link active " id =" home-tab " data-toggle =" tab " href =" #home13 " role =" tab "
aria-controls =" home13 " aria-selected =" true " > Home </ a >
< a class =" nav-link " id =" profile-tab " data-toggle =" tab " href =" #profile13 " role =" tab "
aria-controls =" profile13 " aria-selected =" false " > Profile </ a >
< a class =" nav-link " id =" contact-tab " data-toggle =" tab " href =" #contact13 " role =" tab "
aria-controls =" contact13 " aria-selected =" false " > Contact </ a >
</ bootstrap-tabs >
< div class =" tab-content " id =" myTabContent " >
< div class =" tab-pane fade show active " id =" home13 " role =" tabpanel " aria-labelledby =" home-tab " >
Content 1
</ div >
< div class =" tab-pane fade " id =" profile13 " role =" tabpanel " aria-labelledby =" profile-tab " >
Content 2
</ div >
< div class =" tab-pane fade " id =" contact13 " role =" tabpanel " aria-labelledby =" contact-tab " >
Content 3
</ div >
</ div >材料設計引導程序輸入Web組件
< bootstrap-input placeholder =" Primary " style-mode =" primary " > </ bootstrap-input >材料設計bootstrap Textarea Web組件
< bootstrap-textarea placeholder =" Primary " style-mode =" primary " > </ bootstrap-textarea >材料設計引導範圍Web組件
< bootstrap-range > </ bootstrap-range >材料設計進度網絡組件
< bootstrap-progress > </ bootstrap-progress > Material Design Circular Progress Web Component
< bootstrap-circular > </ bootstrap-circular >材料設計文件輸入Web組件
< bootstrap-file-input > </ bootstrap-file-input >材料設計引導開關按鈕Web組件
< bootstrap-switch-button > </ bootstrap-switch-button > src/
JavaScript文件。
src/styles/
Apache許可證2.0
