초보자를 위한 Twitter Bootstrap 기반 사용자 인터페이스입니다. 부트스트랩 설치 필요한 구성 요소 선택
다운로드하기 전에 코드 편집기(Sublime Text 3 권장)와 HTML 및 CSS에 대한 지식이 있는지 확인하세요. 여기서는 소스 파일을 다루지 않지만 언제든지 직접 다운로드하여 연구할 수 있습니다. 우리는 컴파일된 부트스트랩 파일을 시작하는 데 집중할 것입니다.
컴파일된 파일 로드시작하는 가장 빠른 방법: CSS, JS 및 이미지의 컴파일되고 축소된 버전을 받으세요. 문서나 소스 파일이 없습니다.
2. 파일 구조다운로드한 파일에는 공통 속성에 따라 논리적으로 그룹화되고 축소된 버전과 컴파일된 버전이 모두 포함된 다음과 같은 구조와 콘텐츠가 있습니다.
다운로드가 완료되면 압축된 폴더의 압축을 풀어 부트스트랩의 (컴파일된) 구조를 확인하세요. 다음과 같아야 합니다.
bootstrap / +-- css / ¦ +-- 부트스트랩 . CSS ¦ +-- 부트스트랩 . 분. CSS +-- js / ¦ +-- 부트스트랩 . Node.js ¦ +-- 부트스트랩 . 분. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - 흰색. png L-- 읽어보세요. MD이것은 부트스트랩의 기본 형태입니다. 거의 모든 웹 프로젝트에서 빠르고 쉽게 사용할 수 있도록 컴파일된 파일입니다. 우리는 컴파일된 CSS 및 JS(bootstrap.*)를 제공하고, 또한 컴파일되고 축소된 CSS 및 JS(bootstrap.min.*)를 제공합니다. 이미지 파일은 이미지를 PNG로 압축하는 Mac 응용 프로그램인 ImageOptim을 사용하여 압축됩니다.
모든 JavaScript 플러그인에는 jQuery가 필요합니다.
3. 구성품Bootstrap은 모든 종류의 작업을 위한 HTML, CSS 및 JS를 갖추고 있으며 페이지 상단에서 찾을 수 있는 카테고리에 모두 나열되어 있습니다.
문서 섹션 지원되는 요소유형과 배경, 링크 스타일, 템플릿 그리드 및 두 개의 간단한 마크업 요소를 재설정하는 일반적인 본문 스타일입니다.
CSS 스타일일반적인 HTML 요소의 스타일: 디자인, 코드, 테이블, 양식 및 버튼. 또한 훌륭한 아이콘 세트인 Glyphicons도 포함되어 있습니다.
구성요소간단한 인터페이스 구성 요소의 기본 스타일: 탭 및 버튼, 탐색 모음, 메시지, 페이지 헤더 등
자바스크립트 플러그인구성 요소와 마찬가지로 이러한 Javascript 플러그인은 도구 설명, 정보 블록, 모달 구성 요소 등을 위한 대화형 구성 요소입니다.
구성 요소 목록Javascript 구성요소와 플러그인에는 다음과 같은 인터페이스 요소가 포함되어 있습니다.
- 버튼 그룹
- 드롭다운 버튼 목록
- 탐색 탭, 버튼 및 목록
- 네비게이션 바
- 단축키
- 배지
- 페이지 헤더와 Hero 요소
- 미니어처
- 메시지
- 프로세스 지표
- 모달 요소
- 드롭다운 목록
- 툴팁
- 정보 블록
- 요소 "아코디언"
- 캐러셀 요소
- 키보드 입력 전
짧은 소개 후에 Bootstrap 사용에 중점을 두겠습니다. 이를 위해 에 나열된 모든 요소가 포함된 기본 HTML 템플릿을 사용합니다.
일반적인 HTML 파일은 다음과 같습니다.
이와 같은 부트스트랩 템플릿을 만들려면 적절한 CSS 및 JS 파일을 첨부하기만 하면 됩니다.
그리고 모든 것이 설정되었습니다! 이 두 파일을 추가하면 Bootstrap을 사용하여 웹사이트나 애플리케이션을 개발할 수 있습니다.
안녕하세요! 이 기사에서는 Bootstrap 프레임워크를 설치하고 연결하는 방법을 설명합니다. Bootstrap이 무엇인지 읽을 수 있습니다.
이전 기사에서 표준 설치에 대해 이미 많이 언급했습니다. 여기에서는 모든 것이 간단합니다. 공식 웹사이트 getbootstrap.com으로 이동하여 시작하기 항목을 클릭하고 첫 번째 옵션을 선택합니다. 따라서 우리는 모든 js 및 css 구성 요소가 포함된 부트스트랩 정식 버전을 다운로드합니다.
Bootstrap CDN은 해당 파일을 컴퓨터에 다운로드하지 않고도 CDN 저장소에서 프레임워크를 연결할 수 있는 기회입니다. 당연히 이 경우 사용자 정의에 대한 이야기는 없습니다.
프레임워크 사용자 정의그러나 사실 부트스트랩에는 기본적으로 많은 구성 요소가 포함되어 있으며 그 중 일부는 특정 사이트를 개발할 때 유용하지 않을 수도 있습니다. 예를 들어 온라인 상점을 디자인하고 있습니다. 모달과 툴팁이 필요하지 않을 수도 있고 CSS 구성 요소가 많이 필요하지 않을 수도 있습니다. 이 경우 프레임워크에 이러한 구성 요소를 포함하지 않는 것이 좋습니다.
또는 간단한 블로그를 만들고 있습니다. 실제로는 아무것도 필요하지 않으므로 메시와 가장 중요한 몇 가지 구성요소만 남겨두면 됩니다.
필요한 것만 선택하는 것은 웹사이트를 만들고 부트스트랩을 사용하는 전문적인 접근 방식입니다. 기본적으로 최신 버전의 프레임워크 CSS 스타일의 압축되지 않은 버전은 143KB입니다. 그리고 스크립트는 60KB가 넘습니다. 예, 코드를 압축하면 무게를 20-40% 줄일 수 있지만 여전히 파일이 가장 가볍지는 않습니다.
예를 들어 모든 구성 요소를 비활성화하고 그리드만 남겨두면(이 작업은 매우 자주 수행됨) CSS의 무게는 15-20KB에 불과하고 압축된 형태에서는 몇 킬로바이트가 더 줄어듭니다. 이렇게 하면 프로젝트의 최대 속도와 최적화를 달성할 수 있습니다.
좋아요, 그건 단지 이론일 뿐입니다. 프레임워크를 사용자 정의하려면 동일한 공식 웹사이트를 방문하여 사용자 정의로 이동하세요.
필요한 구성 요소 선택첫 번째 단계는 Bootstrap 버전에 포함할 구성 요소를 구성하는 것입니다. CSS부터 시작해 보겠습니다.
인쇄 미디어 스타일 – 인쇄용 미디어 쿼리입니다. 사이트 페이지를 인쇄하지 않으려면 비활성화할 수 있습니다.
타이포그래피, 코드, 표, 양식 및 버튼은 모두 원하는 경우 CSS에서 직접 스타일을 지정할 수 있는 것입니다. 물론 시간이 걸리겠지만 요소의 디자인이 프레임워크가 기본적으로 제공하는 것과 매우 다른 경우 이러한 CSS 스타일을 모두 비활성화하고 직접 작성할 수 있습니다.
그리드 시스템은 실제로 그리드입니다. 이것이 프레임워크의 주요 기능이기 때문에 비활성화해도 아무런 의미가 없습니다. 템플릿을 모든 장치에 쉽게 적용할 수 있는 것은 그리드 덕분이며 오늘날 모바일 트래픽 시대에 이는 매우 중요합니다. 우리는 어떤 상황에서도 끄지 않습니다.
반응형 유틸리티 - 적응형 유틸리티이므로 절대 비활성화하지 않는 것이 좋습니다. 다음 기사에서는 적응형 유틸리티에 대해 이야기하고 그리드 시스템을 자세히 살펴보겠습니다. 요소를 숨기거나 특정 화면 너비에 표시되도록 하는 클래스입니다. 매우 편리하고 유용합니다.
예를 들어 목록 그룹, 버튼 표시줄, 아이콘, 패널, 경고, 페이지 매김, 이동 경로 등이 있습니다. 아이콘 글꼴을 비활성화할 수도 있습니다. 사이트에 아이콘이 전혀 필요하지 않거나 다른 세트를 연결하는 경우에는 이 작업을 수행할 가치가 있습니다. 실제로 제시된 모든 구성 요소 중에서 무엇이 필요한지, 무엇이 필요하지 않은지 앉아서 생각해야 합니다. 각 사이트마다 디자인과 기능이 다르기 때문에 각 사이트마다 고유한 세트가 있습니다.
자바스크립트 구성요소
드롭다운 메뉴, 도구 설명, 모달 창 및 슬라이더가 있습니다. 이 중 아무것도 필요하지 않으면 끄십시오. 어떤 경우에는 사이트에 드롭다운 메뉴, 기본 페이지의 슬라이더 및 모달 창이 있으면 모든 구성 요소가 실제로 유용할 수 있습니다. 어떤 경우에는 최대 1~2개의 구성 요소가 유용할 수 있으며, 그러면 코드를 연장하거나 불필요한 구성 요소를 비활성화할 필요가 없습니다.
Jquery 플러그인여기에서 javascript 구성 요소가 올바르게 작동하는 데 도움이 되는 jquery 라이브러리 플러그인을 비활성화할 수 있습니다. 따라서 사이트에서 슬라이더를 사용하지 않으면 캐러셀 생성을 위한 플러그인이 필요하지 않으며, 툴팁이 필요하지 않으면 tooltips.js 등을 비활성화하세요.
Scrollspy 플러그인은 텍스트의 위치를 모니터링하고 이에 따라 하나 또는 다른 메뉴 항목을 강조 표시합니다. 일반적으로 이러한 기능은 랜딩 페이지에 필요하지만 일반 사이트에서는 거의 본 적이 없습니다. 등등. 무엇이 필요한지, 무엇이 필요하지 않은지 잘 살펴보세요.
변수가 적음다음으로, Less 변수에 대한 설정이 포함된 많은 하위 항목이 있는 거대한 항목이 여러분 앞에 열립니다. 여기에서는 색상, 글꼴 크기, 중단점, 그리드의 열 수, 들여쓰기 등 거의 모든 것을 변경할 수 있습니다.
물론, 이렇게 하려면 최소한 Less의 기본 사항을 알아야 하거나 최소한 이러한 양식을 직관적으로 탐색해야 합니다.
예를 들어 @font-family-base 변수가 보이면 적어도 그것이 사이트의 기본 글꼴인 글꼴 이름을 담당한다는 것을 직관적으로 이해해야 합니다. 음, @font-size-base 변수는 기본 글꼴 크기를 설정합니다. 부트스트랩에서는 기본적으로 14픽셀입니다.
이러한 필드를 모두 편집할 수 있습니다. 14를 20으로 변경하면 이제 기본 글꼴 크기가 20픽셀인 프레임워크를 다운로드할 수 있습니다. 따라서 제목 등의 크기를 즉시 조정할 수 있습니다.
그리드 설정그리드 시스템의 설정도 우리에게 매우 흥미롭습니다. 여기에는 다음과 같은 내용이 있습니다.
보시다시피 몇 초 안에 열 수와 열 사이의 들여쓰기 너비를 변경할 수 있습니다. Grid-float-breakpoint 변수는 모바일 메뉴가 아이콘으로 축소되는 지점을 설정합니다.
예를 들어 @screen-md-min으로 값을 변경하면 너비가 991픽셀 이하일 때 축소가 발생합니다. 이 변수를 제거하고 값을 픽셀 단위로 쓸 수도 있습니다. 예를 들어 520픽셀입니다. 그러면 메뉴 접기는 스마트폰과 휴대폰에서만 발생하게 됩니다.
실제로 Bootstrap 사용자 정의 페이지에는 많은 설정이 있지만 일반적으로 이 사용자 정의 방법(공식 웹사이트의 사용자 정의 페이지 사용)은 가장 빠르고 편리하지 않습니다. 다음으로 가장 빠른 길을 보여드리겠습니다.
프레임워크를 2~10개 변경해야 하거나 필요한 구성 요소를 간단히 비활성화해야 하는 경우 사용자 정의 페이지를 사용하십시오. 더 많은 값을 변경하려면 다른 방법을 사용해야 합니다.
실제로 프레임워크 버전을 구성할 때 페이지 맨 아래에 있는 큰 버튼을 클릭하세요. Bootstrap 버전을 컴파일하여 컴퓨터에 다운로드합니다. 그런 다음 연결하여 사용하기만 하면 됩니다. 나는 이미 이전 기사에서 연결에 대해 이야기했습니다(WordPress에서 연결하는 방법 포함).
Less 소스를 다운로드하고 편집하기이미 말했듯이 프레임워크의 소스 코드를 많이 편집해야 하고 변경 사항을 즉시 확인하려면 소스가 더 적게 필요합니다. 프레임워크의 정식 버전과 동일한 위치(시작하기 섹션)에서 다운로드할 수 있습니다.
적은 소스로 작업하고 편집하려면 다음이 필요합니다.
최소한 CSS에 대한 지식이 있거나 다른 전처리기에 대한 지식이 적습니다.
적은 컴파일러(무료로 다운로드 가능)
실제로 더 적은 소스를 통한 사용자 정의에 대해 자세히 설명하지는 않겠지만 이것이 가장 좋은 방법입니다. 사용자 정의 페이지로 100번 이동하여 점점 더 많은 새 버전의 프레임워크를 컴파일할 필요가 없기 때문입니다.
부트스트랩 테마 지정 또는 요소 모양 변경기본적으로 프레임워크의 전체 버전에서는 css 폴더에서 bootstrap-theme.css 파일을 찾을 수도 있습니다. 사이트에 연결할 필요는 없습니다. 어떤 기능을 수행합니까? 이 파일은 필요한 경우 필요한 요소의 스타일을 변경하는 데에만 필요합니다.
이와 동일한 역할은 스타일을 재정의할 수도 있는 자신만의 style.css로 수행할 수 있습니다. 부트스트랩 테마는 필수 파일이 아니며 주문을 위해 사용됩니다. 예를 들어 다음과 같은 3개의 파일이 있습니다.
bootstrap.css – 물론 이것은 프레임워크 자체의 코드입니다.
bootstrap-theme.css – 여기서 부트스트랩 요소의 스타일을 재정의합니다.
style.css – 이 파일의 요소에 대한 스타일을 작성합니다.
그러면 코드와 프로젝트 구조에 순서가 있게 됩니다. 그러나 아무도 단일 파일(style.css)에서 모든 작업을 수행하고 테마 파일을 전혀 사용하지 않는 것을 금지하지 않습니다.
가장 중요한 것은 스타일이 성공적으로 재정의되도록 프레임워크 코드가 있는 파일보다 나중에 html 마크업에 테마 파일과 사용자 고유의 CSS를 포함하는 것입니다.
테마 작동 방식의 예이미 말했듯이 기본적으로 Bootstrap에는 bootstrap 테마 파일이 포함되어 있습니다. 연결해 보세요. 참고로 메인 파일 다음에 연결하세요.
기본적으로 Bootstrap의 버튼은 다음과 같습니다.
그리고 테마와 파일을 연결한 후 모양이 어떻게 변하는지 살펴보겠습니다.
보시다시피 약간의 그라데이션이 나타납니다. 따라서 부트스트랩 테마 파일의 코드를 다시 작성하고 버튼에 대한 자신만의 스타일을 얻을 수 있습니다. 하지만 bootstrap.css에서 이러한 변경 사항을 직접 적용해 보는 것은 어떨까요? 사실, 프레임워크의 새 버전이 지속적으로 출시되고 있으며, 업그레이드하기로 결정한 경우 변경 사항을 새 버전에 구현하기가 어려울 것입니다. 별도의 파일을 만들고 거기에 변경 사항을 설명할 수 있는 경우에는 개발자가 소스 코드를 건드리지 않는 것이 좋은 형태라고 생각됩니다. 훨씬 스마트하고 편리해졌습니다.
인터넷에서 다운로드한 새로운 Bootstrap 테마를 설치하는 방법은 무엇입니까?대부분 외국 사이트를 포함하여 다양한 테마와 템플릿을 무료로 다운로드할 수 있는 사이트가 많이 있습니다. 혼란을 피하기 위해 Bootstrap을 템플릿으로 사용하고 테마를 요소의 표준 모양을 재정의하는 CSS 규칙 집합으로 사용하여 디자인된 웹 사이트를 고려해 보겠습니다.
예를 들어 이러한 테마는 bootswatch.com/에서 다운로드할 수 있으며 검색 엔진을 사용하면 수십 가지 다른 테마를 찾을 수 있습니다.
이러한 테마를 설치하는 일반적인 원칙은 해당 테마를 다운로드하는 사이트에 따라 다릅니다. 부트스트랩 테마 형식으로 다운로드할 수 있다면 다운로드하여 연결하세요. 예를 들어 bootswatch에서는 bootstrap.css를 다운로드하고 표준 프레임워크 스타일 파일을 그것으로 바꿔야 합니다. 소스가 적은 옵션도 있습니다.
이 기사를 시작으로 우리는 개발 용이성, 명확한 구조 및 페이지 적응성을 보장하므로 웹 사이트, 관리 패널, 랜딩 페이지 및 웹 애플리케이션을 만드는 데 가장 자주 사용되는 Twetter Bootstrap 3 프레임워크에 대해 연구하기 시작할 것입니다.
기본 Bootstrap 3 템플릿 설치Bootstrap 3 도구 및 방법을 사용하려면 http://getbootstrap.com으로 이동하여 CSS, 글꼴, js 폴더 및 그 안에 해당 파일이 포함된 아카이브를 다운로드해야 합니다.
CSS 스타일과 js 스크립트를 연결하는 방법을 모르신다면 이 글과 이 글을 보시길 추천드리며, 저희 경우에는 CSS 스타일이 섹션 단위로 연결되어 있습니다.
닫는 태그 앞의 스크립트
페이지 하단에 있습니다.또한 bootstrap.min.css 및 bootstrap.min.js 파일을 사용하면 사이트에 도움이 될 것입니다. 이러한 파일은 크기가 더 작고 로딩 속도에 긍정적인 영향을 미치기 때문입니다.
글꼴 연결은 두 가지 방법으로 수행할 수 있습니다.
두 번째 옵션이 바람직하지만 어떤 방법을 선택하더라도 연결은 다음과 같이 진행됩니다.
@font-face( 글꼴 계열: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- Regular.ttf); ) h2( 글꼴 계열: glyphicons-halflings-regular,sans-serif; )
또는 첫 번째 방법의 스타일 태그에 두 번째 방법의 CSS 파일에 그 안의 모든 텍스트를 삽입합니다.
제이쿼리 설치Bootstrap 3가 제대로 작동하려면 공식 웹사이트 jquery.com에서 링크를 통해 jquery 라이브러리 파일을 추가로 다운로드하여 사이트의 js 폴더에 배치해야 합니다.
Jquery 연결은 닫는 태그 이전에 발생합니다.
쿠키를 사용하면 당사가 귀하에게 서비스를 더 쉽게 제공할 수 있습니다. 당사 서비스를 사용하면 귀하는 쿠키 사용을 허용하게 됩니다.
, 그러나 bootstrap.js 파일 이전
jquery는 부트스트랩 전에 로드되어야 하기 때문입니다.
부트스트랩 3가지 그리드 및 화면 크기Bootstrap의 기본은 12열 그리드(col-)가 구축되는 클래스 세트입니다. 그리드 내에서는 -xs- -sm- -md- -lg- -xl- 5가지 유형의 화면이 지원됩니다.
- -xs- 화면 크기가 575px 미만입니다.
- -sm- 화면 크기는 576px 이상, 767px 이하입니다.
- -md- 화면 크기는 768px 이상, 991px 이하입니다.
- -lg- 화면 크기는 992px 이상, 1199px 이하입니다.
- -xl- 화면 크기가 1200px 이상입니다.
따라서 클래스 col-lg-12가 있는 div는 큰 화면에서 div 열이 12열 또는 너비의 100%를 차지한다는 것을 의미합니다. 마찬가지로 스마트폰 화면의 div col-sm-6은 6열 또는 너비의 100%를 차지합니다. 너비의 50%.
메쉬 컨테이너의 종류. 고무 레이아웃 레이아웃그리드의 주요 컨테이너 유형은 컨테이너 및 컨테이너 유체 클래스입니다.
컨테이너 내부에서 사용하면 그리드가 중앙에 있는 화면의 1/3을 시각적으로 차지하며 12개의 열이 모두 이 영역에 위치합니다.
컨테이너 유체 클래스에 그리드를 배치하면 모든 레이아웃 요소가 고무 요소처럼 전체 화면에 걸쳐 배치되고 너비가 감소함에 따라 서로를 향해 이동하게 됩니다.
모든 것이 디자인 레이아웃과 레이아웃의 목적에 따라 다르기 때문에 컨테이너 및 컨테이너 유체 사용에 대한 구체적인 권장 사항은 없지만 사이트의 관리 패널 및 컨테이너에는 컨테이너 유체를 사용하는 것이 적절합니다.
또한 -fluid 클래스를 컨테이너 클래스뿐만 아니라 행 문자열에도 적용하여 요소를 행으로 정렬할 수 있습니다. 하지만 row-fluid를 일반 용기에 담아두면 별 차이를 느끼지 못할 것입니다. 이 조합은 다음과 같이 div.container 외부에서 사용하는 것이 가장 좋습니다.
안녕하세요, 저는 Bootstrap 3 템플릿입니다
내 용기는 유동적이지 않습니다!
그리고 나는 유동적이야!요소 배치를 위한 선행 클래스는 그리드 요소를 한 행에 배치하는 데 사용됩니다. 이를 통해 수평으로 정렬할 수 있지만 행의 인덱스 합은 12를 초과할 수 없다는 점을 고려해야 합니다. 그렇지 않으면 마지막 요소는 다음과 같습니다. 두 번째 줄로 이동했습니다.
제목 1 제목 2 제목 3
브라우저 페이지 크기를 줄이면 제목이 가로 행에서 세로 목록으로 정렬됩니다.
요소 가시성 클래스Bootstrap 3 레이아웃 시스템은 다양한 장치 및 화면에서 요소를 표시하거나 숨기기 위한 추가 클래스를 제공합니다. visible-*-* 및 hide-*로 지정됩니다.
첫 번째 대시 뒤에 visible-*-*를 표시하는 클래스에는 일반적으로 화면 유형 식별자(xs, sm, md, lg, xl)가 있고 두 번째 대시 뒤에는 열 크기(1-12)가 있습니다. 예를 들어 visible-lg-6 - 요소가 6열 너비의 대형 화면에 표시됩니다.
숨기기 클래스 Hidden-* 대시 뒤에는 화면 유형 식별자(xs,sm,md,lg,xl)가 있습니다. 예를 들어, Hidden-xs 클래스가 있는 마크업 요소는 소형 장치(화면 크기가 다음보다 작음)에 표시되지 않습니다. 575px).
이러한 요소를 결합하면 div 컨테이너를 표시하거나 숨길 수 있습니다.
제목 1 제목 2
첫 번째 제목은 대형 기기에 표시되고 두 번째 제목은 작은 화면에서는 사라집니다. 이렇게 하려면 크기가 모바일 장치의 화면 너비와 비슷하도록 브라우저 창의 크기를 줄이세요.
또한 클래스의 div 컨테이너에서 show 또는 hide를 지정합니다. 그러나 이 경우 화면이 변경될 때 표시 속성은 변경되지 않습니다. 표시되는 경우 표시되고, 숨겨진 경우 클래스에서 Hidden 단어를 제거하는 것만 가능합니다. 원하는 요소를 볼 수 있습니다.
Bootstrap 3의 미디어 쿼리CSS 미디어 쿼리를 사용하려면 CSS 파일에 특수 기호 @media를 지정하고 괄호 안에 최소 및/또는 최대 화면 너비를 지정해야 합니다. 일반 CSS 마크업에서 화면 크기를 픽셀 단위로 작성해야 하는 경우 부트스트랩 3에서는 다음 구성을 작성할 수 있습니다.
@media(최소 너비: @screen-sm-min)( ... ) @media(최소 너비: @screen-md-min)( ... ) @media(최소 너비: @screen-lg- 분)( ... )
요소 순서 이동컨테이너 내부에서 블록을 이동할 수 있는 또 다른 흥미로운 클래스인 push 클래스는 요소를 오른쪽으로 이동하고 pull 클래스는 왼쪽으로 이동합니다.
인접한 컨테이너에서 결합할 때 화면 크기를 변경할 때 후자의 순서를 변경할 수 있습니다. 이 예에서는 대형 화면(-lg-)에서 제목 2가 왼쪽에 있고 제목 1이 오른쪽에 있습니다. 화면 너비가 중간 크기(-md-)로 줄어들면 요소가 이동하고 순서가 변경됩니다. 순차적이 됩니다.
제목 1 제목 2
Bootstrap 3 레이아웃 시스템에 대한 첫 번째 소개를 마치겠습니다. 템플릿 스타일과 스크립트, 기본 그리드 요소, 미디어 쿼리, 컨테이너 유형 등을 설치하는 방법을 배웠습니다. 다음 기사에서는 메뉴, 버튼, 슬라이더, 아이콘 등 보조 및 추가 요소를 살펴보겠습니다.
2012년 2월 24일 오후 9시 25분 Twitter 초보자를 위한 부트스트랩 기반 사용자 인터페이스- 웹 디자인
입문 나는 여가 시간에 취미로 흥미로운 뉴스 피드 헤드라인을 모아 놓은 한 페이지짜리 수집기를 개발합니다. 어떤 시점에서 프로토타입의 기본 기능은 준비되었지만 누락된 유일한 것은 "디자인" 작업 옆에 있는 확인란뿐이었습니다. 문제 설명 디자이너의 마법을 익히지 않고 아름다운 사용자 인터페이스를 얻으려면(기본적인 지식만 있으면 됩니다.) 페인트에 대한 지식) 및 프로그래머(html 및 css에 대한 기본 지식만 있음).
페이지는 다음 요소로 구성됩니다.
- 이름
- 뉴스 링크 전송 양식
- 고유 리더 코드를 이메일로 보내기 위한 양식
- 고유 리더 코드 입력 양식
- 날짜별로 그룹화된 뉴스 목록(날짜, 시간, 제목 링크, 클릭 수, 뉴스를 읽을 수 있거나 새로 읽을 수 있음)
- RSS에 연결
- 크롬 확장 프로그램 링크
- 릴리스 ID
- 피드백 이메일
... ...
두 번째 줄은 부트스트랩이 지원하는 장치에 인터페이스를 자동으로 적용하는 데 필요합니다. 2단계. "고기"를 디자인합니다. "고기"란 뉴스 목록을 의미합니다. 이를 수행하는 가장 쉬운 방법은 프레임이 비활성화된 테이블을 사용하는 것입니다. 첫 번째 열은 날짜(그룹당 한 번만)이고, 두 번째 열은 시간, 세 번째 열은 제목과 전환 횟수입니다. 부트스트랩 규칙에 따라 이 모든 것은 컨테이너에 패키징되어야 합니다.
| (날짜) | (시간) | (제목) ((전환 횟수)) |
읽기 뉴스의 경우 특별 클래스를 나타냅니다.
(제목) 3단계. 뉴스 링크를 보내는 양식입니다. 여기에서도 모든 것이 간단합니다. Bootstrap은 여러 가지 미리 만들어진 양식 스타일을 제공합니다: 일반 양식, 한 줄 양식, 검색 양식... 두 번째 양식이 필요합니다. 테이블 앞의 컨테이너에 추가하세요.
추가하다 ...
class="span10" - 부트스트랩은 12개 열의 그리드를 기반으로 인터페이스를 구축한다고 가정합니다. 요소는 그에 따라 정렬될 수 있습니다. 과학적인 시행착오 방법을 통해 입력 필드 너비가 10에 도달했습니다. 4,5,6단계. 모자. 사용자 친화적인 웹사이트가 어떻게 보여야 하는지에 대한 내 생각은 미니멀리스트 스타일을 제안합니다. 즉, 불필요한 것은 모두 숨겨지고, 숨길 수 없는 것은 모두 희미해집니다. 드롭다운 메뉴에서 양식을 숨기고 RSS 및 크롬 확장 프로그램에 대한 링크를 창백하게 만듭니다. 이 모든 것을 헤더에 담아 사이트 상단에 붙입니다(클래스 = "navbar navbar-fixed-top").
*** ...
양식 자체는 다음과 같습니다.
... ×이메일로 고유 코드 보내기 취소 보내기 ×고유한 리더 코드를 입력하세요.
다른 컴퓨터에서 읽은 뉴스를 동기화할 수 있습니다.
취소 보내기중요한 점. 이것이 작동하려면 몇 가지 스크립트를 연결해야 합니다.
...
...
출시일 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap을 사용하면 많은 노력과 지식 없이, CSS 한 줄도 작성하지 않고 html 코드를 크게 깨뜨리지 않고도 사람들에게 보여주기가 부끄럽지 않은 아주 멋진 프로토타입 인터페이스를 얻을 수 있었습니다. 관심이 있으시면 다음 기사에서 PHP + MySQL에 대한 깊은 지식 없이(기본 프로그래밍 기술만 사용하여) 백만 달러짜리 아이디어를 종이에 보여줄 뿐만 아니라 작업 프로토타입의 형태로.관심을 가져주셔서 감사합니다!
UPD: "나는 PR입니다"에서 주제를 제거하고 싶지 않고 불필요한 링크를 모두 제거했습니다.
여러분, 저는 Bootstrap이 매우 멋진 것이라고 생각합니다. 나는 이 글에서 그 이유를 설명하려고 노력할 것이다. 글쎄, 가자 기사의 거의 전체 절반이 그림없이 작성되었으며 그리드 작동 방식에 대한 이론과 설명 만 있다는 사실에 대해 즉시 사과드립니다. 하지만 이것은 매우 중요합니다! 이 책이 필요한 사람은 누구나 그것을 손에 쥐고 읽고 이해하기를 바랍니다. 기사의 후반부는 이미 더 간단하게 인식되었으며 스크린샷과 함께 더 많은 예가 있습니다.
부트스트랩 - 그게 뭐죠?그럼 중요한 질문부터 시작해 보겠습니다. 부트스트랩은 CSS 및 JS 프레임워크로, 기본적으로 미리 작성된 코드가 포함된 파일 세트입니다. 거의 모든 프레임워크 개발자의 목표는 자신과 도구에 액세스할 다른 사람들을 위해 웹 사이트 개발을 단순화하는 것입니다. Bootstrap의 경우 완전 무료이므로 어떤 방식으로든 사용할 수 있고, 소스 코드를 편집하고, 프레임워크를 원하는 방식으로 맞춤 설정할 수 있습니다. 완벽합니다.
부트스트랩 설치프레임워크 파일을 HTML 문서에 연결해야 하는 경우(예: 연습용) 공식 웹사이트 getbootstrap.com에서 프레임워크를 다운로드하고 해당 파일을 프로젝트에 복사한 다음 필요한 파일을 연결하세요. 이 파일에 대한 간략한 개요를 설명하겠습니다.
이것은 프레임워크의 표준 세트입니다. 사실, 쉽게 사용자 정의하고 자신에게 맞게 변경할 수 있습니다. 예를 들어 스크립트를 전혀 사용하지 않거나 하나의 그리드만 연결합니다. 일반적으로 이것에 대해서도 이야기하겠습니다.
러시아어 부트스트랩 문서getbootstrap을 방문하시면 여기에 있는 모든 내용이 영어로 되어 있다는 것을 눈치채셨을 것입니다. 프레임워크에 대한 러시아어 도움말을 사용할 수 있습니다. 찾기 쉽습니다. 이렇게 하려면 메인 페이지에서 시작하기 섹션으로 이동하세요. 맨 아래로 스크롤하면 번역 링크가 있습니다. 거기에서 러시아어를 찾아 클릭하세요. 이제 러시아어 버전의 사이트에 접속하셨습니다. 사실, 여기에서 모든 것이 번역된 것은 아니지만 대략 70~80% 정도 정확하므로 모든 것을 이해할 수 있습니다.
부트스트랩 그리드뭐라고 말하든 Bootstrap의 주요 요소는 반응형 그리드입니다. 일반적으로 그리드가 없으면 프레임워크는 거의 모든 가치를 잃게 됩니다. 그리드 덕분에 적응형 템플릿을 빠르게 생성할 수 있기 때문입니다. 동시에 미디어 쿼리에 전혀 익숙하지 않을 수도 있습니다. 프레임워크가 적응성 구현을 관리하므로 미디어 쿼리가 필요하지 않습니다. 블록에 올바른 클래스를 할당하기만 하면 됩니다.
이 수업은 무엇입니까? 문서를 살펴보겠습니다. 많은 도움이 될 것입니다. CSS - 그리드 시스템 섹션으로 이동하세요. 그리드 작업에 대한 일반적인 규칙은 간단하므로 지금부터 나열하겠습니다.
그리드로 작업하는 방법?HTML 테이블이라고 생각하세요. 테이블용 HTML 코드를 작성해 본 적이 있다면 모든 내용이 table 태그에 배치되고, 한 행이 tr 태그에 배치된 다음, 셀이 그 태그에 배치된다는 것을 알고 있을 것입니다( td ).
따라서 그리드에서는 모든 것이 유사합니다. 컨테이너 클래스는 그리드의 일반 컨테이너 역할을 합니다. 부트스트랩 그리드에는 2가지 옵션이 있습니다. 완전히 고무이고 최대 너비는 여전히 유한합니다. 따라서 일반 블록에 컨테이너 클래스가 부여되면 사이트의 최대 너비는 1170픽셀이 됩니다. 더 이상 확장되지 않습니다. 당연히 콘텐츠가 중앙에 위치하게 됩니다.
컨테이너-유체 클래스를 설정하면 메쉬가 완전히 고무가 됩니다. 즉, 크기 제한이 없습니다. 예를 들어, 1920픽셀 너비의 모니터에서 웹사이트를 열면 전체 너비로 볼 수 있습니다.
따라서 웹 사이트를 개발할 때 가장 먼저 해야 할 일은 템플릿이 어떤 것인지 결정하는 것입니다. 완전히 고무로 되어 있거나 너비가 여전히 제한되어야 합니다.
좋습니다. 컨테이너 블록에는 그리드 행이 포함되어야 합니다. 한 줄에 있는 모든 블록을 그 안에 배치해야 합니다. 즉, 가장 일반적인 템플릿인 머리글, 주요 부분, 오른쪽 열 및 바닥글을 사용하면 3개의 열이 있습니다. 첫 번째에는 헤더만 있고, 두 번째에는 콘텐츠와 사이드바가 있으며, 마지막에는 바닥글이 있습니다. 그러한 사이트의 마크업은 다음과 같습니다.
헤더 콘텐츠... 및 바닥글 사이드바
하지만 현재로서는 잘못된 마크업입니다. 누락되었기 때문입니다... 뭐? 그렇죠, 세포들! Bootstrap의 경우 컬럼이라고도 합니다. 부트스트랩 그리드는 12개의 열로 구성됩니다. 너비가 1200픽셀 이상, 100픽셀 이상인 모든 블록에 삽입할 수 있습니다. 이는 열 너비가 픽셀 단위가 아닌 백분율로 지정되기 때문입니다.
이 12열 시스템은 어떻게 작동하나요?그래서 우리는 프레임워크와 관련된 가장 중요한 문제에 도달했습니다. 저를 믿으십시오. 이것을 이해한다면 다른 모든 것은 말도 안됩니다. 가장 중요한 것은 그리드가 어떻게 작동하는지 이해하는 것입니다. 그러면 빠른 적응형 레이아웃으로 가는 길이 열릴 것입니다.
이렇게 하려면 바로 아래 문서를 스크롤하면 중요한 그리드 속성이 포함된 표를 찾을 수 있습니다.
그건 그렇고, 열 자체는 Bootstrap에서 col- 클래스로 표시되지만 이것은 복합 클래스이므로 단순히 col-을 작성하지 않습니다. Bootstrap에는 다양한 너비의 블록 크기를 제어하도록 설계된 4가지 특수 클래스가 있습니다.
이들은 4개의 클래스이지만 요소의 크기를 제어하기 위해 1에서 12까지의 숫자가 사용됩니다. 기억하는 것처럼 그리드에는 정확히 12개의 열이 있기 때문입니다.
헤더 콘텐츠 사이드바 바닥글
이해하기 매우 쉽습니다. 먼저 헤더를 생성합니다. 헤더는 어떤 경우에도 (보통) 너비의 100%를 차지하므로 그리드에 배치할 필요가 없습니다. 그러나 어쨌든 우리는 그것을 넣을 것입니다. 이 클래스 col-md-12는 무엇입니까? 이미 말했듯이, 누구도 단순히 col-을 작성하지 않습니다. 이 클래스를 사용하면 본질적으로 브라우저에 다음과 같이 알립니다.
셀입니다 | 열
중형 장치(md 클래스)에서 너비는 12열 중 12열, 즉 행 너비의 100%여야 합니다.
하지만 다른 장치의 너비는 어떻습니까? 대형(lg) 화면에서는 대형 화면의 값이 상속되지만 소형 화면의 경우 상속되지 않기 때문에 100%가 됩니다. 간단합니다. col-xs-4 를 작성하면 열 너비는 모든 장치에서 33%가 되고, col-lg-4 이면 대형 장치에서만 열 너비가 33%가 됩니다. 이 기능이 있으니 기억해두세요.
그렇다면 작은 화면에서 너비 값이 저장되지 않으면 어떻게 될까요? 재설정됩니다. 발생 방법은 다음과 같습니다.
col-sm-4 - 작은 화면에서는 블록이 너비의 33%를 차지하며 md 및 lg 화면에서는 동일하지만 xs, 즉 가장 작은 화면에서는 너비가 100%로 재설정됩니다. 따라서 한 가지 더 간단한 규칙을 기억하십시오. 작은 화면에 대해 아무것도 지정하지 않으면 화면에서 블록이 100% 너비로 표시됩니다.
콘텐츠 사이드바
본질적으로 우리는 브라우저에게 다음과 같이 말하고 있습니다.
콘텐츠 블록의 너비를 12개 열 중 8개로 설정하면 이 상황은 소형, 중형 및 대형 화면에서 발생합니다(작은 화면을 지정하는 것으로 충분하며, 큰 화면의 경우 값이 상속됩니다). 그러나 가장 작은 화면에서는 블록이 100% 점유됩니다. 이는 정확합니다. 일반적으로 휴대기기에서는 사이트가 1개의 열에 표시됩니다.
동일한 소형, 중형 및 대형 화면에서 측면 열을 행 너비의 1/3로 설정합니다. 이미 이해했듯이 가장 작은 화면에서는 너비도 100%로 재설정됩니다. 그렇게 간단합니다.
글쎄, 바닥 글을 다룰 일은 없습니다. 글쎄, 우리는 그리드가 어떻게 작동하는지에 대한 기본 원칙을 다루었지만 여전히 그것이 어떻게 작동하는지 알아야 합니다...
부트스트랩 중첩 그리드사실 이제 우리는 템플릿을 메인 블록으로만 나누었지만 내부에서는 열로 나눌 수도 있습니다. 예를 들어 콘텐츠의 여러 열에 제품이 표시될 수 있습니다. 어떻게 해야 하나요? 매우 간단합니다. 내부에 정확히 동일한 그리드를 만듭니다. 중첩되지만 12개의 열도 포함됩니다. 이 모든 것을 요약하면 다음과 같은 결론에 도달합니다.
모든 블록 안에는 그리드 수가 무제한으로 있을 수 있습니다. 예를 들어, 제품이 포함된 블록에는 제품을 구분하기 위한 그리드가 있고, 하나의 제품 자체가 포함된 블록에는 가격, 가용성 정보 및 추가 정보를 구분하기 위한 또 다른 그리드를 생성할 수 있습니다. 정보.
이제 콘텐츠 블록 내부에 또 다른 그리드를 만들어 제품을 3열로 배열해 보겠습니다. 이제 콘텐츠가 있는 블록을 살펴보겠습니다.
콘텐츠
그리고 우리는 그 안에 다음과 같이 씁니다:
제품 카탈로그: 제품 이름 
상품 설명
보시다시피 콘텐츠 내부에 새 그리드를 만들었습니다. 내부에 행을 넣었고 행에는 이미 제품이 포함된 블록이 3개 있습니다. 제품 카드와 함께 col-sm-4 블록을 복사하고 2번 더 붙여넣으면 다음과 같습니다(어떤 제품 사진이든 찍을 수 있습니다. 저는 큰 사진을 찍었습니다).
또 다른 중요한 점을 놓쳤습니다. 이미지가 위치한 블록에 적응하려면 각 이미지에 img-response 클래스를 제공해야 합니다. 나처럼 이 작업이 불편하다고 생각한다면 다음과 같이 자신만의 style.css를 작성하세요.
Img(최대 너비: 100%; 높이: 자동; 디스플레이: 블록; )
이제 이 코드를 저장하고 CSS 파일을 프로젝트에 연결하세요. 이제 이미지는 기본적으로 적응형이 됩니다.
글쎄요, 꽤 순조롭게 진행됐나요? 예, 하지만 부트스트랩이 없으면 더 오랜 시간 동안 고통을 겪어야 합니다. 유일한 점은 블록 내부에 그리드를 생성할 때 더 이상 컨테이너 클래스가 포함된 블록을 생성할 필요가 없다는 것입니다. 왜 이것이 필요하지 않습니까? 네, 그리드가 생성되는 블록이 컨테이너 역할을 하기 때문입니다.
따라서 모든 블록에서 원하는 만큼의 열을 생성하고 복잡한 템플릿을 만들 수 있습니다. 그리고 이 모든 것은 부트스트랩이 없는 것보다 훨씬 빠릅니다. 왜냐하면 모든 CSS를 처음부터 작성해야 하기 때문입니다.
반응형 유틸리티이것은 부트스트랩의 또 다른 훌륭한 기능입니다. 필요한 너비로 블록을 숨기거나 표시할 수 있다는 사실로 구성됩니다. 예를 들어 좁은 화면에서는 측면 열을 완전히 숨기고, 모바일 장치에서는 몇 가지 새로운 요소를 추가하고, 넓은 화면에서는 열을 추가하는 등의 작업을 수행할 수 있습니다.
다양한 응용 프로그램 옵션이 있지만 가장 중요한 사항인 이러한 유틸리티를 사용하는 방법에 대해서는 말씀드리지 않았습니다. 이렇게 하려면 원하는 블록에 클래스를 추가하기만 하면 됩니다. 숨기려면 다음 클래스를 지정하십시오.
보행인
이 경우 Hidden-xs 클래스는 무엇을 합니까? 초소형 장치에서는 바닥글을 숨깁니다. 다른 모든 블록에서는 블록이 표시됩니다.
반대로 가장 작은 화면에만 표시하려면 visible-xs-block 클래스를 사용해야 합니다. 이 경우 블록은 가장 좁은 화면을 제외한 모든 화면에서 숨겨집니다. 따라서 적응형 유틸리티 클래스는 다음과 같이 작성됩니다.
명확하게 설명하기 위한 몇 가지 예는 다음과 같습니다.
이것이 모두 작동하는 방식입니다. 그게 바로 그것이며 다른 방법은 없습니다. 나는 당신이 이것을 이해하기를 바랍니다. 그것을 실천해 봅시다. 매우 원시적이긴 하지만 테스트 템플릿이 있습니다.
작업: 작은 화면에서는 측면 열이 사라지도록 하고, 가장 작은 화면에서는 하나의 제품도 사라지게 만드는 것입니다. 따라서 xs 장치에서는 제품이 이미 3개가 아닌 2개의 열에 있습니다.
HTML 코드만 편집하여 직접 시도해 보세요. 무엇을 해야 합니까? 먼저 열을 살펴보겠습니다. sm 화면에서 열을 숨기려면 해당 열에 Hidden-SM 클래스를 추가하기만 하면 됩니다.
좋습니다. 이제 세 번째 제품에 Hidden-xs 클래스를 추가해야 하며 이 클래스는 가장 작은 화면에서 사라집니다. 나머지 두 상품의 클래스는 다음과 같습니다.
즉, 중형 장치에서는 블록이 12개 열 중 4개 열을 차지하며 이는 너비의 33.33%, 초소형 장치에서는 50%로 변환될 수 있습니다. 그리고 이 너비에서는 제품이 포함된 블록 하나가 사라지기 때문에 제품이 포함된 두 블록이 모두 다음과 같이 한 줄로 깔끔하게 배열됩니다.
엄청난! 이를 이해하면 이미 원하는 거의 모든 방식으로 웹 페이지의 블록을 조작할 수 있습니다. 스스로 작업을 생각해 보고 구현해 보세요.
나를 끝까지 움직여줘다음으로 또 다른 아주 좋은 트릭을 보여 드리겠습니다. 블록을 오른쪽이나 왼쪽으로 이동시키는 기능입니다. 연속된 3개의 제품이 아니라 1개의 제품이 있고 전체 너비를 차지하지 않는다고 가정해 보겠습니다. 그리고 당신의 임무는 그것을 중앙에 정렬하는 것입니다. 12열 시스템으로 작업한다는 점을 명심하면 이 작업을 쉽게 수행할 수 있습니다.
제품과 함께 한 블록을 남겨 두겠습니다.
블록을 중앙에 배치하기 위해 블록을 얼마나 이동해야 하는지 이해하려면 간단한 계산만 하면 충분합니다. 중형 및 대형 화면에서는 왼쪽으로 4열, 작은 화면에서는 3열을 이동해야 합니다. 다음과 같이 보입니다.
col-md-offset-4 클래스는 다음과 같이 말합니다. 중형 및 대형 화면에서 블록을 상위 컨테이너 너비의 33%만큼 왼쪽으로 오프셋합니다(왼쪽 오프셋 1/3, 블록 너비 1/3, 오른쪽 오프셋 1/3, 결과적으로 센터링).
클래스 col-xs-offset-6: 매우 작고 작은 화면에서는 왼쪽으로 25%만큼 이동합니다(¼ 왼쪽 패딩, ½ 블록 너비, ¼ 패딩 오른쪽).
요점을 이해하시고 필요하다면 이 수업들을 활용하시길 바랍니다.
부트스트랩 구성 요소 및 사용 예축하드립니다. 우리는 프레임워크와 관련된 가장 중요한 주제를 다루었습니다. 중요한 것은 그리드와 그것으로 작업하는 것입니다. 구성 요소 작업은 이미 문서로 이동하여 원하는 구성 요소의 코드를 복사하고 필요한 경우 필요에 맞게 변경한다는 의미입니다. 그러나 구성 요소를 사용하는 방법에 대한 몇 가지 예를 아래에 제공하겠습니다.
빠른 부동 및 랩 취소왼쪽으로 당기기 및 오른쪽으로 당기기 클래스를 사용하면 블록을 왼쪽이나 오른쪽으로 보내 블록을 빠르게 부동화할 수 있습니다. 흐름을 취소하는 것을 잊지 마세요. 이를 위해 Clearfix 클래스를 사용할 수 있습니다.
부트스트랩: 수평 반응형(모바일) 메뉴다음 구성 요소를 템플릿에 직접 추가할 것이므로 읽기만 하는 것이 아니라 코드 작업을 하고 싶다면 다음 단계를 모두 따르세요.
실제로 Bootstrap을 사용하면 적응형 메뉴뿐만 아니라 작은 화면에서 완전히 접혀 하나의 버튼 아래에 숨겨진 소위 모바일 메뉴도 매우 쉽게 만들 수 있습니다. 이 기술은 많은 반응형 템플릿에서 볼 수 있으며 실제로 구현하기가 매우 쉽습니다. 예제 모바일 메뉴 코드는 문서에 있습니다. 거기에서 가져와서 조금 다시 실행해 보겠습니다.
따라서 가장 먼저 할 일은 헤더가 있는 블록을 제거하는 것입니다. 실제로 템플릿의 경우 메뉴가 헤더가 되기 때문입니다. 메뉴 코드는 모든 사이트 콘텐츠 앞에, 심지어 컨테이너 블록 앞에도 배치되어야 합니다. 왜? 예, 이제 그리드가 탐색 표시줄에 이미 내장되어 있음을 직접 확인할 수 있습니다. 코드는 다음과 같습니다.
스위치 버튼 로고/이름
찾다
코드가 많다고 해서 놀라지 마세요. 현재 사이트의 모습은 다음과 같습니다.
그러나 메뉴가 화면의 전체 너비를 차지하지 않는 경우에는 메뉴를 중앙에 배치하는 것이 좋습니다. 이렇게 하려면 메뉴에 대한 추가 래퍼 블록을 생성해야 하며, 이 블록은 컨테이너 유체 클래스가 있는 블록 뒤에 배치되어야 합니다. 이 블록을 닫는 것을 잊지 마세요. 나는 navbar-wrap 클래스를 제공했습니다. 이에 대한 스타일은 다음과 같습니다.
즉, 간단히 너비를 제한하고 중앙에 배치할 수 있습니다. 또는 처음에 컨테이너 유체를 컨테이너로 바꾸십시오.
보시다시피 메뉴에 로고, 간단한 항목 두 개, 드롭다운 항목, 검색 양식을 추가했습니다. 즉, 요소가 많았다. 자신만의 클래스를 추가하여 메뉴를 쉽게 사용자 정의할 수 있습니다. 하지만 지금으로서는 내 목표는 단순히 이 구성 요소를 보여주는 것입니다.
화면 너비가 768픽셀 미만인 장치에서는 메뉴가 다음과 같이 표시됩니다.
보시다시피 메뉴가 접혀 있습니다. 오른쪽 상단에 있는 버튼을 클릭하면 열립니다. 화면에는 로고만 남았습니다.
드롭 다운 메뉴동시에 위의 예를 통해 Bootstrap에서 드롭다운 메뉴 항목이 생성되는 방법을 이해할 수 있습니다. 더 자세한 내용을 보려면 이 코드를 추출해 보겠습니다.
따라서 드롭다운 항목의 컨테이너는 드롭다운 클래스가 있는 일반 목록 항목입니다. 그 안에는 기본 링크가 있으며 클릭하면 드롭다운 메뉴가 열립니다. 코드에서 볼 수 있는 데이터 속성을 할당하는 것이 매우 중요합니다. 이것이 없으면 아무 것도 작동하지 않습니다. 또한 bootstrap.js 파일이 웹 페이지에 연결되어 있는지 확인해야 합니다.
캐럿 클래스가 있는 범위는 화살표에 지나지 않습니다. 덕분에 항목이 드롭다운 항목이고 메뉴 자체 아래에는 표준 글머리 기호 목록을 사용하여 구성된다는 것을 이해할 수 있습니다. 모든 것이 매우 간단합니다. 이 코드를 사용하여 드롭다운 항목을 구현할 수 있습니다.
부트스트랩을 사용하여 이동 경로(Breadcrumbs) 추가하기많은 상점에서 현재 페이지에 대한 전체 경로가 포함된 소위 빵 부스러기 블록을 찾을 수 있습니다. 프레임워크를 사용하면 이 작업도 쉽게 수행할 수 있습니다. 코드를 참조하세요.
실제로 번호가 매겨진 목록에 대한 탐색경로 클래스를 지정하고 여기에 일반적인 목록 항목을 입력하는 것만으로도 충분합니다. 그런데 템플릿의 두 번째 수준 제목을 중앙에 배치하겠습니다(CSS에 작성해야 함).
H2( 텍스트 정렬: 중앙; )
이동 경로의 모양을 어떻게든 변경하려면 CSS에서 .breadcrumb 선택기를 사용하세요. 예를 들어 배경색을 제거하는 방법은 다음과 같습니다.
이동 경로( 배경: 투명; )
현재 사이트의 모습은 다음과 같습니다.
기본적으로 테이블은 전체 창에 걸쳐 늘어나므로 크기를 제한하기 위해 너비가 제한된 상자에 포장합니다. 기본적으로는 끔찍해 보이지만 테이블 태그에 테이블 클래스를 추가하면 모든 것이 훨씬 더 좋아질 것입니다.
