smart bootstrap
v6.0.0
npm install @ smarthtmlelemnets / smart - bootstrap Copie a folha de estilo de copiar a sua folha de estilo antes de todas as outras folhas de estilo NPM para carregar nosso CSS.
< link rel =" stylesheet " href =" src/styles/smart.bootstrap.css " >ou
import 'src/styles/smart.bootstrap.css'; < script src =" src/smart.element.js " > </ script >
< script src =" src/smart.bootstrap.js " > </ script >ou
import 'src/smart.element.js'
import 'src/smart.bootstrap.js'O pacote estende o bootstrap adicionando o design do material e as variáveis CSS3 para estilo.
Os componentes do boostrap são reescritos do zero e são construídos como componentes da web usando a Smart Framework .
O bootstrap SCSS é reescrito com variáveis CSS3 e o design do material é adicionado.
Demonstração ↗
Componente da web de botão de bootstrap de design de material
< 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 >Componente da Web de caixa de seleção Design de design de material
< bootstrap-check-box checked > Checked </ bootstrap-check-box >
< bootstrap-check-box > Unchecked </ bootstrap-check-box >Componente da web de botão de manutenção de bootstrap de design de material
< bootstrap-radio-button checked > Active </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >Componente da web de bootstrap de bootstrap de design de material
< 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 >Componente da Web de botão de bootstrap de design de design de material
< 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 >Componente da Web do grupo de bootstrap de design de design de material
< 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 >Componente da Web modal de bootstrap de design de material
< 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 >Componente da web de bootstrap de design de design de material
< 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 >Componente da Web de bootstrap de design de design de material
< bootstrap-input placeholder =" Primary " style-mode =" primary " > </ bootstrap-input >Componente da Web de Bootstrap de design de design de material
< bootstrap-textarea placeholder =" Primary " style-mode =" primary " > </ bootstrap-textarea >Componente da Web de bootstrap de design de design de material
< bootstrap-range > </ bootstrap-range >Componente da Web de Progresso de Projeto de Material
< bootstrap-progress > </ bootstrap-progress > Material Design Circular Progress Web Component
< bootstrap-circular > </ bootstrap-circular >Componente da web de entrada de design de design de material
< bootstrap-file-input > </ bootstrap-file-input >Componente da Web de botão de botão de bootstrap de design de material
< bootstrap-switch-button > </ bootstrap-switch-button > src/
Arquivos javascript.
src/styles/
Licença Apache 2.0
