2장: 부트스트랩 페이지 레이아웃 style_javascript 기술

Twitter의 Bootstrap은 현재 가장 인기 있는 프런트엔드 프레임워크입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.

학습 포인트:

1. 페이지 레이아웃

이번 강의에서는 제목, 페이지 본문, 정렬, 목록과 같은 일반 콘텐츠를 포함하여 Bootstrap 전역 CSS 스타일의 레이아웃 스타일에 대해 주로 학습합니다.

1. 페이지 레이아웃

Bootstrap은 개발자가 사용할 수 있도록 일반적으로 디자인된 페이지 레이아웃 스타일을 제공합니다.

1. 페이지 본문

Bootstrap은 전역 글꼴 크기를 14px로 설정하고 줄 높이를 1.428(예: 20px)로 설정합니다. e388a4556c0f65e1904146cc1a846bee 단락 요소는 줄 높이의 1/2(예: 10px)로 설정됩니다. 333.

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2.제목

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

우리는 Firebug에서 요소를 보면서 Bootstrap이 각각 h1 ~ h6에 대한 CSS 스타일을 재구성했으며 동일한 기능을 달성하기 위해 일반 인라인 요소 정의 class=(.h1 ~ h6)도 지원한다는 것을 알게 되었습니다.

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

참고: Firebug를 통해 요소를 보면 글꼴 색상, 글꼴 스타일 및 줄 높이가 모두 고정되어 균일성이 보장되는 반면 기본 요소는 시스템 내장에 따라 결정됩니다. 색상은 가장 검은색을 선호합니다.

h1~h6 요소 사이에 작은 요소를 자막으로 삽입할 수도 있습니다.

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

Firebug를 통해 살펴본 결과 h1~h3 아래의 small 요소 크기는 상위 요소의 65%에 불과한 것으로 나타났습니다. 그런 다음 계산을 통해(Firebug에서 계산한 스타일 참조) h1~h3 아래의 small 요소는 23.4입니다. px, 19.5px, 15.6px; h4 ~ h6 미만의 작은 요소 크기는 각각 상위 요소의 75%(13.5px, 10.5px, 9px)만 차지합니다. h1 ~ h6 아래의 작은 스타일도 변경되었으며 색상은 연한 회색으로 변경되었습니다: #777, 줄 높이가 1, 두께가 400입니다.

3. 인라인 텍스트 요소

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上，下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4. 정렬

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5. 대문자 사용

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6. 약어

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7. 주소 텍스트

//设置地址，去掉了倾斜，设置了行高，底部 20px
<address>
　　<strong>Twitter, Inc.</strong><br>
　　795 Folsom Ave, Suite 600<br>
　　San Francisco, CA 94107<br>
　　<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

8. 인용문

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
　　Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
　　Bootstrap 框架
</blockquote>

9. 목록 레이아웃

//移出默认样式
<ul class="list-unstyled">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
　　<dt>Bootstrap</dt>
　　<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10. 코드

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre class="brush:php;toolbar:false"><p>Please input...</p>

Bootstrap은 태그 변수를 나타내기 위해 b7f90f73cad438258bf67e62f79b2113를 열거하고 프로그램 출력을 나타내기 위해 162cd570ab1483e383d78dcb7f452f7c를 열거하지만 CSS를 다시 작성하지는 않습니다.

위는 편집자가 소개한 부트스트랩 페이지 레이아웃 스타일에 대한 지식입니다. 모든 분들께 도움이 되었으면 좋겠습니다!