매일매일 배워야 하는 부트스트랩 기본 레이아웃_자바스크립트 스킬

이번에는 조판에 대해 주로 배우고 싶습니다. HTML의 기본 태그에도 대부분 존재하므로 시리즈의 완성도를 높이기 위해 검토하고 기록해 보겠습니다. 주요 내용은 다음과 같습니다.

• 1.제목
• 2. 페이지 본문
• 3. 강조
• 4.약어
• 5. 주소
• 6. 명언
• 7. 목록

1. 제목

부터

까지 HTML의 모든 제목 태그를 사용할 수 있습니다. 또한 인라인 속성의 텍스트에 제목 스타일을 제공하기 위해 .h1에서 .h6까지의 클래스가 제공됩니다.

<div class="container"> 
  <h1 class="page-header">标题</h1>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
 </div> 

효과를 직접 확인해보세요

제목에는 자막을 표시하는 데 사용할 수 있는 태그나 .small 요소 가 포함될 수도 있습니다.

 <div class="container"> 
  <h1 class="page-header">标题</h1>
  <h1>h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2>h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3>h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4>h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5>h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6>h6. Bootstrap heading</h6><small>Secondary text</small>
 </div> 

2. 페이지 본문
부트스트랩은 전역 글꼴 크기를 14px로, 줄 높이를 1.428로 설정합니다. 이러한 속성은 및 모든 단락 요소에 직접 할당됩니다. 또한

(단락)도 아래쪽 여백이 줄 높이의 1/2(예: 10px)로 설정됩니다.

 <h1 class="page-header">页面主体</h1>
  <div style="border:1px solid ">
   <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

이펙트 표시를 보면 확연히 드러납니다.

본문 문구
.lead를 추가하여 단락을 강조 표시할 수 있습니다.

 <h1 class="page-header">Lead Body Copy</h1>
  <div style="border:1px solid ">
   <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

위 페이지 본문과 비교해보면 확실한 효과를 보실 수 있습니다.

3. 강조
강조를 위해 HTML 태그를 사용하고 약간의 스타일을 부여하세요.
1. 작은 글씨
강조할 필요가 없는 인라인 또는 블록 유형 텍스트의 경우 태그를 사용하여 감싸면 그 안의 텍스트가 상위 컨테이너 글꼴 크기의 85%로 설정됩니다. 제목 요소 내의 중첩된 요소는 다른 글꼴 크기로 설정됩니다.
태그 대신 인라인 요소 .small을 지정할 수도 있습니다.

<small>This line of text is meant to be treated as fine print.</small>

2. 집중
글꼴 두께를 늘려 텍스트를 강조하세요.

<strong>rendered as bold text</strong>

3.이탤릭체
기울임꼴로 표시된 텍스트를 강조하세요.

<em>rendered as italicized text</em>　　

4. 수업 정렬
텍스트 정렬 클래스를 이용하면 쉽고 편리하게 텍스트를 재정렬할 수 있습니다.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

분명히 첫 번째 줄은 왼쪽 정렬되고, 두 번째 줄은 가운데 정렬되고, 세 번째 줄은 오른쪽 정렬됩니다.
5. 수업 강조
강조를 표현하기 위해 색상을 사용하는 클래스입니다. 링크 위에 마우스를 올리면 기본 링크 스타일처럼 색상이 더 어두워지도록 링크에도 적용할 수 있습니다.

<h1>强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

4. 썸네일
약어 및 약어 위에 마우스를 올리면 전체 콘텐츠가 표시됩니다. Bootstrap은 HTML 요소에 대한 향상된 스타일을 구현합니다. 약어 요소에는 제목 속성이 있으며 밝은 점선 프레임으로 나타납니다. 마우스를 그 위로 이동하면 "물음표"가 있는 포인터로 변합니다. 전체 내용을 보려면 약어 위에 마우스를 올리면 되는데, 제목 속성을 포함해야 합니다.
기본 약어
전체 내용을 보려면 약어 위에 마우스를 올리면 되는데, 제목 속성을 포함해야 합니다.

<abbr title="attribute">attr</abbr>

효과는 보이는데 스크린샷이 안되네요.
초기성
약어에 .initialism을 추가하면 글꼴 크기가 더 작아집니다.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

코드를 업로드하고 효과를 직접 확인해 보세요. ​
5. 주소
연락처 정보를 일상적인 사용에 가장 가까운 형식으로 표시하세요. 원하는 스타일을 유지하려면 각 줄 끝에
를 추가하세요.

<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>

<address>
 <strong>Full Name</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

引用选项
对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

 <blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
无序列表
顺序无关紧要的一列元素。

 <ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ol>

同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。