smart bootstrap

Materialdesign Bootstrap -Webkomponenten | FREI

Installation

 npm install @ smarthtmlelemnets / smart - bootstrap 

CSS

Kopieren Sie das Stylesheet in Ihr vor allen anderen NPM-Stylesheets, um unsere CSS zu laden.

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

oder

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

JavaScript

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

oder

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

Überblick

Das Paket erweitert Bootstrap durch Hinzufügen von Materialdesign und CSS3 -Variablen zum Styling.

Die Boostrap -Komponenten werden von Grund auf neu geschrieben und als Webkomponenten mithilfe des Smart Framework erstellt.

Das Bootstrap SCSS wird mit CSS3 -Variablen umgeschrieben und das Material Design wird hinzugefügt.

Komponenten

Demo ↗

Material Design Bootstrap -Schaltfläche Webkomponente

 < 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 Design Bootstrap Kontrollkästchen Webkomponente

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

Material Design Bootstrap -Optionsknopf -Webkomponente

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

Material Design Bootstrap Dropdown -Webkomponente

 < 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 Design Bootstrap Split Button Web Component

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

 < 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 Design Bootstrap Modale Webkomponente

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

Material Design Bootstrap Registerkarte Webkomponente

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

Material Design Bootstrap Eingabe -Webkomponente

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

Material Design Bootstrap TextArea Web -Komponente

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

Material Design Bootstrap Range Web Component

 < bootstrap-range > </ bootstrap-range >

Webkomponente des Materialdesigns Fortschritt

 < bootstrap-progress > </ bootstrap-progress > 

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

Materialentwurfsdatei Eingabe -Webkomponente

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

Material Design Bootstrap Switch Taste Web -Komponente

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

Die Dateistruktur

• src/

  JavaScript -Dateien.

• src/styles/

Lizenz

Apache -Lizenz 2.0