사전 처리 된 레이아웃 클래스의 부트 스트랩 프론트 엔드 프레임 워크를 사용하면 더 이상 각 레이아웃 태그 요소에 대해 많은 CSS 코드를 작성할 필요가 없습니다. 부트 스트랩의 레이아웃 기능을 사용할 수 있습니다. 타이틀, 단락, 목록 및 기타 인라인 요소에 대한 사전 정의 된 스타일을 만들고 매우 표준 웹 페이지를 입력 할 수 있습니다.
함께 배우자. 부트 스트랩 프론트 엔드 프레임 워크는 어떤 조판 클래스가 우리를 위해 미리 정의 되었습니까?
첫째 : Bootstrap은 Helvetica Neue, Helvetica, Arial 및 Sans-Serif를 기본 글꼴 스택으로 사용합니다. 현재 모든 웹 페이지에서 가장 일반적으로 사용되는 글꼴입니다. 그때부터 우리는 더 이상 몸에 대한 글로벌 스타일의 글꼴 스타일을 정의 할 필요가 없습니다. 부트 스트랩 프론트 엔드 프레임 워크 글꼴 -Family를 사용하는 한 위의 글꼴 시리즈는 기본적으로 사용됩니다.
즉, Font-Family : Sans-Serif;
부트 스트랩의 프론트 엔드에서 그것을 확인하고 프레임 워크 CSS 파일 bootstrap.css를 엽니 다.
친애하는 친구, 부트 스트랩 프론트 엔드 프레임 워크의 기본 글꼴 만 사용할 수 있습니까? 분명히. 나중에 부트 스트랩 프레임 워크를 사용자 정의하고 우리가 좋아하고 효과하고 싶은 부트 스트랩 프레임 워크를 만드는 방법을 알려 드리겠습니다.
둘째 : 부트 스트랩 프론트 엔드 프레임 워크는 H1-H6의 CSS 스타일을 사전 정의했습니다. Bootstrap 프론트 엔드 프레임 워크의 프레임 워크 CSS 파일 bootstrap.css에서 정의 된 스타일의 일부를 추출했습니다. 글꼴 크기의 속성 값이 각각 HN에 대해 정의되어 있음을 알 수 있습니다.
H1 {font-size : 36px;}
H2 {font-size : 30px;}
H3 {font-size : 24px;}
H4 {font-size : 18px;}
H5 {font-size : 14px;}
H6 {font-size : 12px;}
실제 효과는 다음과 같습니다.
웹 페이지 코드 :
웹 페이지 효과 :
셋째 : 인라인 자막. 제목에 인라인 자막을 추가 해야하는 경우 요소의 양쪽에 <small>을 추가하거나 .small 클래스를 추가하면 다음 예에서 볼 수 있듯이 글꼴 크기가 작은 더 가벼운 텍스트를 얻을 수 있습니다.
웹 페이지 코드 :
웹 페이지 효과 :
넷째 : 기본 사본을 이끌어냅니다. 단락에 강조 텍스트를 추가하려면 다음 예에서 볼 수 있듯이 클래스 = "lead"를 추가 할 수 있습니다.
웹 페이지 코드 :
웹 페이지 효과 :
다음 부트 스트랩 프론트 엔드 프레임 워크 클래스는 더 이상 예제를 제시하지 않습니다. 위의 예와 같은 작은 효과를 시도 할 수 있기 때문에 목적 만 기록합니다.
다섯 번째 : HTML의 기본 강조는 <small> (부모 텍스트 크기의 85%로 텍스트를 설정), <strong> (텍스트를 두꺼운 텍스트로 설정), <em> (텍스트를 이탤릭체로 설정)임을 강조하십시오.
여섯 번째 : 약어, HTML 요소는 www 또는 HTTP와 같은 약어 태그를 제공합니다. Bootstrap은 <abbr> 요소의 스타일을 텍스트의 맨 아래에 표시되는 점선 테두리로 정의하며 마우스가‘abbr> 제목 속성에 텍스트를 추가 한 한) 마우스가 호버링 될 때 전체 텍스트가 표시됩니다. 더 작은 글꼴 텍스트를 얻으려면 <abbr>에 .initialism을 추가하십시오.
일곱 번째 : 주소. <dassching> 태그를 사용하면 웹 페이지에 연락처 정보를 표시 할 수 있습니다. <dessching> 표시 : 표시 : 블록;
여덟 번째 : Blockquote, HTML 텍스트 옆에 기본 <blockquote>를 사용할 수 있습니다. 다른 옵션에는 <small> 태그를 추가하여 참조 소스를 식별하고 class.pull-right를 사용하여 오른쪽 참조를 정렬합니다. 다음 예는 이러한 기능을 보여줍니다.
9 번째 : 목록
Bootstrap은 순서 목록, 변하지 않은 목록 및 정의 된 목록을 지원합니다.
순서 목록 : 순서 목록은 숫자 또는 기타 주문 된 문자로 시작하는 목록을 나타냅니다.
변형되지 않은 목록 : 비정규 목록은 특정 순서가없는 목록을 말하며 전통적인 스타일의 강조로 시작하는 목록입니다. 이 강조 숫자를 표시하지 않으려면 클래스를 사용하여 스타일을 제거 할 수 있습니다. Class.list-inline을 사용하여 모든 목록 항목을 같은 줄에 넣을 수도 있습니다.
정의 목록 : 이 유형의 목록에서 각 목록 항목에는 <dt> 및 <dd> 요소가 포함될 수 있습니다. <dt>는 소속 (또는 문구)으로 정의 된 사전과 같은 정의 용어를 나타냅니다. 다음으로 <dd>는 <dt>의 설명입니다. ClassDl-Horizontal을 사용하여 설명과 함께 <dl> 행의 소지품을 나란히 표시 할 수 있습니다.
다른 부트 스트랩 프론트 엔드 프레임 워크 클래스는 다음과 같이 매우 능숙해야하며 모든 사람은 암기하고 능숙하게 사용해야합니다.
.lead highlights paragraphs
.small set small 텍스트 (부모 텍스트 크기의 85%로 설정)
.Text-lege set 텍스트 왼쪽 정렬
.Text-Center 세트 텍스트 센터 정렬
.Text-Right를 올바른 텍스트 정렬로 설정합니다
.Text-JUSTIFY 세트 텍스트 정렬을 설정하고 단락의 화면 외부의 텍스트가 자동으로 포장됩니다.
.Text-Nowrap 단락은 화면 너머로 줄을 감싸지 않습니다
.text-lowercase를 설정 텍스트 소문자
.Text-upperCase 세트 텍스트 대문자
.Text-Capitalize는 단어의 첫 글자의 대문자를 설정합니다.
.Initialism <abbr> 요소에 표시된 텍스트가 작은 글꼴로 표시됩니다.
.Blockquote-Reverse 세트 참조 오른쪽 정렬
.list-unstyled는 기본 목록 스타일을 제거하고 목록 항목 (in <ul> 및 <ol>)에 남아있는 정렬을합니다. 이 클래스는 직접 자식 목록 항목에만 적합합니다 (중첩 된 목록 항목을 제거 해야하는 경우 중첩 목록 에서이 스타일을 사용해야합니다).
.list-inline 모든 목록 항목을 같은 줄에 배치합니다
.dl-horizontal이 클래스는 플로트 및 오프셋을 설정하며 <dl> 요소 및 <dt> 요소에 적용됩니다. 특정 구현의 경우 인스턴스를 볼 수 있습니다.
.pre-scrollable Make <pre> element scrollable scrollable
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.