타이포그래피에 부트스트랩 사용하기
- PHP中文网원래의
- 2017-06-22 11:12:421460검색
이전 단어
<p> 이번 글에서는 부트스트랩의 타이포그래피 관련 내용을 자세히 소개하겠습니다 <p>Title
<p>【h】 <p> HTML의 모든 제목 태그는<h1>부터 < ;h6> 사용 가능<h1> 到 <h6> 均可使用
<p> 默认情况下，从h1到h6的font-size如下所示
2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
36px -> 30px -> 24px -> 18px -> 14px -> 12px;
.h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式，除了display属性不同外，其他属性与<h1> 到 <h6>样式相同
h1,.h1{
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}<small> 标签或赋予 .small 类的元素，可以用来标记副标题。<small>标签和.small类的元素的样式相同
h1 small,.h1 small, h1 .small, .h1 .small{
font-size: 65%;
font-weight: normal;
line-height: 1;
color: #777;
}<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>
段落
<p>【body】 <p> 默认情况下，页面font-size为16px，行高line-height(chrome下)为1.334 <p> Bootstrap 将全局font-size 设置为 14px，line-height 设置为 20px。这些属性直接赋予 <body> 元素和所有段落元素
<span style="color: #000000;">body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background-color: #fff;<br> margin:0;
}</span><p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）
p{
margin: 0 0 10px;
}.lead 类可以让段落突出显示
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
内联文本
<p>【标记文本】 <p> 文本需要标记，使用标签mark, .mark {
padding: .2em;
background-color: #fcf8e3;
}small, .small {
font-size: 85%;
}<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>
对齐
<p> 通过文本对齐类，可以简单方便的将文字重新对齐.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
大小写
<p> 通过这几个类可以改变文本的大小写.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
缩略语
<p> 当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的<abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性
<p>【基本缩略语】
abbr[title], abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #777;
}.initialism 类，可以让 font-size 变得稍微小些
.initialism {
font-size: 90%;
text-transform: uppercase;
}<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
<p> 让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br> 기본적으로 h1부터 h6까지의 글꼴 크기는 다음과 같습니다
address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
초기 상황에서는 1em = 16px, 변환은 다음과 같습니다🎜 🎜<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<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>🎜🎜 Boostrap은 h1입니다. -h6의 글꼴 크기가 아래와 같이 재설정되었습니다. 🎜🎜
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}🎜🎜 또한 .h1에서 .h6 클래스까지 인라인 속성의 텍스트에 제목 스타일을 지정하는 데에도 제공됩니다. 표시 속성을 제외하면 <small> 태그와 같습니다. 또는 .small 클래스가 할당된 요소를 사용하여 자막을 표시할 수 있습니다. <small>태그와 .small 클래스 요소의 스타일은 동일합니다🎜🎜<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> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>🎜🎜<br>🎜🎜🎜🎜paragraph🎜🎜【body】🎜🎜기본적으로 페이지 글꼴 크기는 16px입니다. , line 높은 line-height(크롬 아래)는 1.334🎜🎜 Bootstrap은 전역
font-size를 14px로, line-height를 20px로 설정합니다. 이러한 속성은 <body> 요소와 모든 단락 요소🎜🎜<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>🎜🎜[p]🎜🎜에 직접 할당됩니다. 또한
<p>(단락 ) 요소도 설정됩니다. 아래쪽 여백(여백)은 줄 높이의 1/2(예: 10px)과 동일합니다.🎜🎜.blockquote-reverse, blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
}🎜🎜【.lead】🎜🎜 .lead 클래스를 추가하면 단락을 작성할 수 있습니다. 강조하세요🎜🎜ul, ol {
margin-top: 0;
margin-bottom: 10px;🎜 🎜<ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>🎜🎜<br>🎜🎜 🎜🎜Inline text🎜🎜【텍스트 표시】🎜🎜 텍스트를 표시해야 합니다. 태그를 사용하세요. 🎜🎜
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ol>🎜🎜【텍스트 삭제 】🎜🎜 삭제된 텍스트에 사용 🎜🎜【쓸모없는 텍스트】🎜🎜 쓸모없는 텍스트에는
.list-unstyled {
padding-left: 0;
list-style: none;
}🎜🎜【Emphasis】🎜🎜 글꼴 두께 값을 늘려 텍스트 강조 🎜🎜【Italic】🎜🎜 텍스트를 강조하려면 이탤릭체를 사용하세요. 🎜🎜 [참고] HTML5에서는 태그를 안전하게 사용할 수 있습니다. 는 강조 없이 단어나 문구를 강조하는 데 사용되며 태그는 주로 음성, 기술 어휘 등에 사용됩니다. 텍스트 정렬 클래스를 이용하면 쉽고 편리하게 텍스트를 재정렬할 수 있습니다🎜🎜<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>🎜🎜
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}🎜🎜<br>🎜🎜🎜🎜Case🎜🎜이 클래스를 통해 텍스트의 대소문자를 변경할 수 있습니다🎜🎜<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>🎜🎜
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt {
font-weight: bold;
}
dt, dd {
line-height: 1.42857143;
}
dd {
margin-left: 0;
} 🎜🎜<br>🎜🎜 🎜🎜Abbreviations🎜🎜 약어 및 약어 위에 마우스를 올리면 전체 콘텐츠가 HTML <abbr> 요소로 표시됩니다. 약어 요소에는 title 속성이 있으며 밝은 점선 프레임으로 나타납니다. 마우스를 해당 요소 위로 이동하면 "물음표"가 있는 포인터로 변합니다. 전체 내용을 보려면 약어 위에 마우스를 올리면 됩니다(보조 기술을 사용하는 사용자에게도 표시됨). 하지만 제목 속성🎜🎜[기본 약어]🎜🎜<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>🎜🎜[약어]🎜를 포함해야 합니다. 🎜 약어에
.initialism 클래스를 추가하면 글꼴 크기가 약간 작아질 수 있습니다🎜🎜.dl-horizontal dt {float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}🎜🎜<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl>🎜🎜<br>🎜🎜 🎜🎜주소🎜🎜 연락처 정보를 가장 잘 표시해 보세요. 일상적인 사용에 가까운 형식으로. 원하는 스타일을 유지하려면 각 줄 끝에
<br>를 추가하세요🎜🎜code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}🎜🎜kbd {
padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}🎜<p><br>
<p>
引用
<p>【默认样式的引用】 <p> 将任何 HTML 元素包裹在中即可表现为引用样式。对于直接引用，建议用 <p> 标签blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }<p><br> <p>【多种引用样式】 <p> 对于标准样式的<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>，可以通过几个简单的变体就能改变风格和内容 <p> 1、命名来源 <p> 添加
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}<div>For example, <code><section></code> should be wrapped as inline. </div> <div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> </div> <div> <pre class="brush:php;toolbar:false"><p>Sample text here...</p>
<p>Sample text here...</p>
y = mx + b
This text is meant to be treated as sample output from a computer program.
위 내용은 타이포그래피에 부트스트랩 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.