StyleBootstrap 은 부트 스트랩을 기반으로 한 오픈 소스 UI 프레임 워크입니다. 현재 Bootswatch, Bootmetro 등과 같은 부트 스트랩 스타일을 기반으로 한 많은 확장 플러그인이 있습니다. 이전에 소개했습니다. Stylebootstrap은 부트 스트랩 스타일의 확장이라고 말해야합니다. 기본 버튼, 양식 및 메뉴 외에도 StyleBootstrap은 포괄적 인 색상 픽업을 설계했습니다.
StyleBootstrap의 기능
부트 스트랩의 특성은 간단하고 효율적이며 유연한 구성을 가지고 있습니다.
부트 스트랩의 어느 버전과 호환됩니다.
강력한 컬러 팔레트는 가장 큰 기능입니다.
StyleBootStrap 관련 구성 요소 인스턴스 및 코드
1. 내비게이션 바
StyleBootstrap의 내비게이션 바 기능은 비교적 강력합니다. 일반적인 메뉴 항목 외에도 다양한 드롭 다운 메뉴와 양식 조합이있을 수 있습니다. 더 큰 하이라이트는 상단 및 하부 마진, 배경색 등과 같은 매개 변수를 포함하여 메뉴 스타일을 사용자 정의하고 조정할 수 있다는 것입니다.
핵심 CSS 코드 :
.navbar-inner {배경-이미지 : -moz-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -ms-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#ffffff), (#f2f2f2)); 배경 이미지 : -webkit-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -o-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -o-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -o-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : -o-linear-gradient (상단, #ffffff, #f2f2f2); 배경 이미지 : 선형 그레이드 (상단, #ffffff, #f2f2f2); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'ffffff, endcolorstr = '#'f2f2f2, gradientType = 0);}. Navbar .Brand {패딩 : 8px 20px 12px; 글꼴 크기 : 20px; 색상 : #727272;}. Navbar .Divider-vertical {높이 : 41px; 배경색 : #ffffff; 테두리 오른쪽 : 1px 고체 #c6c6c6;}. navbar .nav> a {패딩 : 10px 10px 11px; 글꼴 크기 : 14px; 색상 : #666666;}. navbar .nav> .Active> a, .navbar .nav> .Active> a : 호버, .navbar .nav> .Active> A : Focus {Color : #424242;}2. 버튼
마찬가지로 StyleBootstrap의 버튼은 풍부한 색상을 설정할 수있을뿐만 아니라 풀다운을 지원할 수 있습니다.
핵심 CSS 코드 :
.btn {색상 : #333333; 배경 이미지 : -Moz-linear-gradient (상단, #ffffff, #e6e6e6); 배경 이미지 : -ms-linear-gradient (상단, #ffffff, #e6e6e6); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#ffffff), (#e6e6e6)까지); 배경 이미지 : -webkit-linear-gradient (상단, #ffffff, #e6e6e6); 배경 이미지 : -o-linear-gradient (상단, #ffffff, #e6e6e6); 배경 이미지 : 선형 그레이드 (상단, #ffffff, #e6e6e6); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'ffffff, endcolorstr = '#'e6e6e6, gradientType = 0);}. 배경색 : #e6e6e6;}. 배경 이미지 : -Moz-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : -ms-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#0088cc), (#0044cc)까지); 배경 이미지 : -webkit-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : -o-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : -o-linear-gradient (상단, #0088cc, #0044cc); 백그라운드 이미지 : 선형 등급 (상단, #0088cc, #0044cc); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'0088cc, endcolorstr = '#'0044cc, gradientType = 0);}. {배경색 : #0044cc;}. 배경 이미지 : -ms-linear-gradient (상단, #fbb450, #f89406); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#fbb450), (#f89406)까지); 배경 이미지 : -webkit-linear-gradient (상단, #fbb450, #f89406); 배경 이미지 : -o-linear-gradient (상단, #fbb450, #fbb450, #f89406); 배경 이미지 : 선형 등급 (상단, #fbb450, #f89406); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'fbb450, endcolorstr = '#'f89406, gradientType = 0);}. {배경색 : #f89406;}. 배경 이미지 : -ms-linear-gradient (상단, #ee5f5b, #bd362f); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#ee5f5b), (#bd362f)); 배경 이미지 : -webkit-linear-gradient (상단, #ee5f5b, #bd362f); 배경 이미지 : -o-linear-gradient (상단, #ee5f5b, #bd362f); 배경 이미지 : -o-linear-gradient (상단, #ee5f5b, #bd362f); 배경 이미지 : 선형 등급 (상단, #ee5f5b, #bd362f); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'ee5f5b, endcolorstr = '#'bd362f, gradientType = 0);}. 배경색 : #bd362f} .btn-success {색상 : 배경 이미지 : -Moz-linear-gradient (상단, #62C462, #51A351); 배경 이미지 : -ms-linear-gradient (상단, #62C462, #51A351); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#62C462), (#51A351)); 배경 이미지 : -webkit-linear-gradient (상단, #62C462, #51A351); 배경 이미지 : -o-linear-gradient (상단, #62C462, #51A351); 배경 이미지 : -o-linear-gradient (상단, #62C462, #51A351); 배경 이미지 : 선형 그레이드 (상단, #62C462, #51A351); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'62c462, endcolorstr = '#'51a351, gradientType = 0);}. 백그라운드 이미지 : -Moz-linear-gradient (상단, #5BC0DE, #2F96B4); 배경 이미지 : -ms-linear-gradient (상단, #5bc0de, #2f96b4); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, (#5bc0de), (#2f96b4)); 배경 이미지 : -webkit-linear-gradient (상단, #5bc0de, #2f96b4); 배경 이미지 : -o-linear-gradient (상단, #5bc0de, #2f96b4); 배경 이미지 : -o-linear-gradient (상단, #5bc0de, #2f96b4); 백그라운드 이미지 : 선형 등급 (상단, #5BC0DE, #2F96B4); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#'5bc0de, endColorStr = '#'2f96B4, gradientType = 0);}. {배경색 : #2F96B4;}3. 컬러 수집기
StyleBootstrap의 컬러 피커는 매우 강력합니다. 색상 버전에서 색상을 선택하거나 색상의 16 진수 값을 입력 할 수 있습니다. 동시에 색상 블록 영역을 드래그하여 필요한 색상을 빠르게 찾을 수 있습니다.
JPicker 플러그인을 사용하면 JPicker 플러그인의 CSS 코드를 여기에서 다운로드 한 다음 프로젝트를 참조 한 다음 다음 CSS 코드를 통해 호출 할 수 있습니다.
@Media all {#jpicker {margin : 0px 8px; 텍스트 정렬 : 왼쪽; } #jpicker ul {font-size : 15px; 여백 : 0px 0px 15px; 패딩 : 0px; } #jpicker ul li {List-Style : 디스크; 패딩 : 2px 0px; } #jpicker ul li ul {마진-바닥 : 10px; } #jpicker ul li ul Li {List-Style : Circle; } #jpicker p {font-size : 13px; 패딩 : 0px 10px; } #jpicker hr {clear : 둘 다; } #jpicker h2.jpicker {font-size : 16px; 패딩 : 20px 10px; } #jpicker 코드 {색상 : #8bd; 글꼴 크기 : 14px; 글꼴 중량 : 대담한; } #jpicker pre {배경 : #eee; 테두리 : 1px 고체 #000; 색상 : #000; 디스플레이 : 블록; 글꼴 크기 : 11px; 마진 : 10px 5px; 패딩 : 5px; } #jpicker span {font-size : 13px; 텍스트 정렬 : 센터; } #jpicker a {색상 : #ff8050; } #jpicker 입력 {font-size : 13px; 패딩 : 2px 5px; } #jpicker h2 {font-size : 16px; 여백 : 10px 0px; }}요약
일반적으로 StyleBootstrap은 여전히 CSS 프레임 워크로 좋습니다. StyleBootstrap 사용에 대한 자세한 내용은 공식 웹 사이트로 직접 이동하여이를 볼 수도 있습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.