smart bootstrap
v6.0.0
npm install @ smarthtmlelemnets / smart - bootstrap CSS를로드하려면 스타일 시트를 다른 모든 NPM 스타일 시트로 복사합니다.
< 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 변수를 추가하여 부트 스트랩을 확장합니다.
부스트랩 구성 요소는 처음부터 다시 작성되며 Smart Framework 사용하여 웹 구성 요소로 구축됩니다.
부트 스트랩 SCSS는 CSS3 변수로 다시 작성되고 재료 설계가 추가됩니다.
데모 ↗
재료 디자인 부트 스트랩 버튼 웹 구성 요소
< 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 >재료 디자인 부트 스트랩 확인란 웹 구성 요소
< bootstrap-check-box checked > Checked </ bootstrap-check-box >
< bootstrap-check-box > Unchecked </ bootstrap-check-box >재료 디자인 부트 스트랩 라디오 버튼 웹 구성 요소
< 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-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 >재료 설계 부트 스트랩 입력 그룹 웹 구성 요소
< 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 >재료 디자인 부트 스트랩 모달 웹 구성 요소
< 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-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 >재료 설계 부트 스트랩 입력 웹 구성 요소
< bootstrap-input placeholder =" Primary " style-mode =" primary " > </ bootstrap-input >재료 디자인 부트 스트랩 텍스토리 웹 구성 요소
< bootstrap-textarea placeholder =" Primary " style-mode =" primary " > </ bootstrap-textarea >재료 설계 부트 스트랩 범위 웹 구성 요소
< bootstrap-range > </ bootstrap-range >재료 설계 진행 상황 웹 구성 요소
< bootstrap-progress > </ bootstrap-progress > Material Design Circular Progress Web Component
< bootstrap-circular > </ bootstrap-circular >재료 설계 파일 입력 웹 구성 요소
< bootstrap-file-input > </ bootstrap-file-input >재료 디자인 부트 스트랩 스위치 버튼 웹 구성 요소
< bootstrap-switch-button > </ bootstrap-switch-button > src/
자바 스크립트 파일.
src/styles/
아파치 라이센스 2.0
