smart bootstrap

Diseño de material Bootstrap Componentes web | GRATIS

Instalación

 npm install @ smarthtmlelemnets / smart - bootstrap 

CSS

Copie pete la hoja de estilo en su antes de todas las otras hojas de estilo para cargar nuestro CSS.

 < link rel =" stylesheet " href =" src/styles/smart.bootstrap.css " >

o

import 'src/styles/smart.bootstrap.css';

Javascript

 < script src =" src/smart.element.js " > </ script >
< script src =" src/smart.bootstrap.js " > </ script >

o

import 'src/smart.element.js'
import 'src/smart.bootstrap.js'

Descripción general

El paquete extiende Bootstrap agregando diseño de material y variables CSS3 para el estilo.

Los componentes de Boostrap se reescriben desde cero y se crean como componentes web utilizando el Smart Framework .

El Bootstrap SCSS se reescribe con variables CSS3 y se agrega diseño de material.

Componentes

Demostración ↗

Componente web de botón de bootstrap de diseño 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 >

Material Diseño de bootstrap casilla de verificación Componente web

 < bootstrap-check-box checked > Checked </ bootstrap-check-box >
< bootstrap-check-box > Unchecked </ bootstrap-check-box >

Material Diseño Bootstrap Botón de radio Componente web

 < bootstrap-radio-button checked > Active </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >
< bootstrap-radio-button > Radio </ bootstrap-radio-button >

Design de material Bootstrap componente web

 < 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 >

Material Diseño Bootstrap Botón dividido Componente 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 >

Material Design Bootstrap Input Group Componente 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 >

Material Diseño Bootstrap Componente web modal

 < 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 " > &times; </ 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 >

Tabas de arranque de diseño de material Componente 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 >

Componente web de entrada de bootstrap de diseño de material

 < bootstrap-input placeholder =" Primary " style-mode =" primary " > </ bootstrap-input >

Material Diseño Bootstrap TextAREA Componente web

 < bootstrap-textarea placeholder =" Primary " style-mode =" primary " > </ bootstrap-textarea >

Componente web de gama de bootstrap de diseño de material

 < bootstrap-range > </ bootstrap-range >

Componente web de progreso de diseño de material

 < bootstrap-progress > </ bootstrap-progress > 

Material Design Circular Progress Web Component
< bootstrap-circular > </ bootstrap-circular >

Componente web de entrada de archivo de diseño de material

 < bootstrap-file-input > </ bootstrap-file-input >

Botón de interruptor de arranque de diseño de material Componente web

 < bootstrap-switch-button > </ bootstrap-switch-button > 

La estructura del archivo

• src/

  Archivos JavaScript.

• src/styles/

Licencia

Licencia de Apache 2.0