모바일 사용자 수가 증가함에 따라 전통적인 웹 시스템 아키텍처는 많은 모바일 터미널의 정상적인 사용과 호환되지 않습니다. 직장에서는 많은 고객이 이제 휴대폰 및 태블릿과 같은 모바일 터미널에서 관리 시스템을 사용할 필요가 있음을 알게 될 것입니다. 해당 응답 웹 페이지가 각 터미널마다 별도로 개발되면 필연적으로 프로젝트 비용과 개발자 압력이 증가합니다. 현재 다중 터미널 문제를 해결하기 위해 태어난 반응 형 레이아웃을 이해해야합니다. 이번에는 경량, 오픈 소스 및 무료 부트 스트랩을 소개합니다.
개발 환경을 구축하십시오
먼저 공식 웹 사이트의 http://www.bootcss.com/의 Boostrap 소스 코드 패키지를 다운로드하십시오. 간단한 프로젝트를 개발하려면 소스 코드에 모든 CSS, JS, 글꼴 등을 추가 할 필요는 없습니다. 프로젝트 요구에 따라 필요한 환경을 조정할 수 있습니다.
필요한 파일은 다음과 같습니다. jQuery.min.js, bootstrap.min.js, bootstrap.css. 일부 글꼴 스타일을 사용해야하는 경우 아래 그림과 같이 글꼴 관련 파일을 추가해야합니다.
[참고] JS를로드 할 때는 먼저 jquery.min.js를로드해야합니다. bootstrap.min.js에서는 jQuery 관련 메소드 (예 : boostrap.min.js)가 jQuery.min.js에 따라 다릅니다.
테스트 부트 랩 랩 환경
테스트 파일 index.html을 작성하십시오. 테스트 파일 내용은 다음과 같습니다.
<! doctype html> <html> <head> <head> <head> <title> 부스트랩 환경 테스트 </title> <link rel = "스타일 시트"유형 = "text/css"href = "./ css/bootstrap.css"> <script type = "text/javascript"src = "./ jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. type = "text/javaScript"src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
위는 부츠 랩 개발 환경입니다. 매우 간단합니다!
Boostrap을 사용할 때 알아야 할 것은 Boostrap의 래스터 시스템입니다. 이 그리드 시스템으로 인해 해상도가 다른 터미널 장치와 더 잘 호환됩니다.
특정 그리드 시스템 공식 웹 사이트에는 명확한 소개가 있습니다. http://v3.bootcss.com/css/. 공식 웹 사이트의 다음 그림은 다음과 같습니다.
Boostrap을 사용할 때 주로 정의 된 스타일을 사용합니다. 이것은 예술 능력이없는 프로그램에 도움이되어 매우 좋은 페이지를 신속하게 구축합니다.
실제로 Bootstrap을 사용할 때는 종종 공식 웹 사이트에서 http://v3.bootcss.com/css/#tables에서 도움이됩니다.
개인적으로 공식 웹 사이트의 예에서 관련 코드를 자신의 웹 페이지에 직접 복사 한 다음이를 기반으로 관련 수정을하는 것이 좋습니다. 이런 식으로 개발 속도가 더 빠르고 정확도가 높아집니다.
부스트랩 스타일 --- 테이블 스타일을 보여줍니다.
<! docType html> <html> <head> <head> <title> test boostrap 환경 </title> <link rel = "stylesheet"type = "text/css"href = "./ css/bootstrap.css"> <script type = "text/javascript"src = "./ jquery.min.js". 유형 = "text/javaScript"src = "./ js/bootstrap.min.js"> </script> <body> <table> <td> <td> 테스트 양식 </td> <td> 테스트 양식 </td> <td> 테스트 양식 </td> <td> 테스트 양식 </td> <td> <td> <td> <td> form </td> <td> test </td> <td> test </td> </tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> <td> <td> <td> <td> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </td> <tt> <td> test </td> <td> test </td> </td> <td> <td> <td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </body> </html>
웹 페이지보기 결과는 다음과 같습니다.
수업 속성이 소개됩니다.
1) 테이블 플러스 이미 부츠 랩 테이블 스타일이 있습니다.
2) 테이블 호버는 테이블 마우스의 행 배경이 밝게 유지됨을 나타냅니다.
3) 테이블 테이블 테이블은 경계로 나타납니다
4) 테이블 스트라이프 테이블 줄무늬
[참고] 여러 속성이 함께 추가되면 각 속성 사이에 공백이 있습니다.
2. 버튼
<!-> <a href = "#"#"role ="button "> link </a> <button type ="제출 "> 버튼 </button> <입력 유형 ="value = "input"> <입력 유형 = "value ="제출 "> <!-표준 버튼-> <버튼 유형 ="버튼 "> <!-<버튼-<버튼-extra weighttans and that weights and that that that that that that that that that that that that that that that that that that that that that that that weathing. type = "button"> (기본 설정) 1 차 </button> <!-성공 또는 긍정적 조치를 나타냅니다-> <버튼 유형 = "버튼"> 성공 </button> <!-정보 경고 메시지를위한 상황에 맞는 버튼-> <버튼 유형 = "button"> (일반 정보) info </button> <! <! <!-경고) 경고를 표시해야합니다. ACTION-> <버튼 유형 = "버튼"> (위험) 위험 </button> <!-버튼 동작을 유지하는 동안 링크처럼 보이게하여 버튼을 강조합니다-> <버튼 유형 = "버튼"> (링크) 링크 </button>
웹 페이지의 결과는 다음과 같습니다.
다른 많은 스타일과 구성 요소의 경우 공식 도움말 문서를 참조하는 것이 좋습니다.
요약
이 기사는 Boostrap의 것이 무엇인지, 사용 방법을 간략하게 소개하는 가이드입니다. 모든 구성 요소와 스타일의 자세한 목록은 없지만 ... 읽으십시오!
이것은 매우 마법의 기사입니다. 클릭하고 살펴 봐야합니다. 공유 및 수집 할 가치가있는 부트 스트랩 학습 자습서
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
부트 스트랩에 관심이있는 사람들이 각 스타일의 영향과 각 구성 요소를 스스로 사용하는 방법을 수동으로 테스트하고 부트 스트랩이 가져온 재미를 진정으로 느낄 수 있기를 바랍니다.