Typography 文字排版

 

标签的语义

1. 含语义的标签

2. 不含语义, 但是具有样式的class

 

<h1></h1>

<p class="h1"></p>

 

两个标签中的内容显示具有相同的效果

 

但是第一个标签中的内容为标题

第二个标签中的内容仅仅是使用了标题的样式

 

 

如果是还不够大

可以使用以上display heading这种样式

 

 

 

 

 

清除预设的标签样式

<ul class="list-unstyled">

 

 

 使列表元素显示在一行内

<ul class="list-inline">

<li class="list-inline-item">Lorem ipsum</li>

<li class="list-inline-item">Phasellus iaculis</li>

<li class="list-inline-item">Nulla volutpat</li>

</ul>

 

 

描述列表对齐

<dl class="row">
            <dt class="col-sm-3">Description lists</dt>
            <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

            <dt class="col-sm-3">Euismod</dt>
            <dd class="col-sm-9">
                <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
                <p>Donec id elit non mi porta gravida at eget metus.</p>
            </dd>

            <dt class="col-sm-3">Malesuada porta</dt>
            <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
            <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                massa justo sit amet risus.</dd>

            <dt class="col-sm-3">Nesting</dt>
            <dd class="col-sm-9">
                <dl class="row">
                    <dt class="col-sm-4">Nested definition list</dt>
                    <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
                </dl>
            </dd>
        </dl>

 

 text-truncate   

会将多余的文字裁切掉 

 

转载于:https://www.cnblogs.com/mkl7/p/10911596.html