Bootstrap3.0学习笔记之CSS相关补充

Bootstrap3.0 是一个前端开发框架，给开发者提供了一些常用的样式和组件，可以方便地快速搭建网站。在开发过程中，事实上我们还会遇到一些需要自定义或者补充的 CSS 样式，这里我们总结了 Bootstrap3.0 学习笔记之 CSS 相关补充攻略，以下是完整的攻略细节。

1. CSS 下文本自动省略

在一些场景下，文本过长的情况下可能会影响整体页面的布局或美观。此时需要对文本进行省略来优化样式。

实现方式：

{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这里注意以下三个CSS属性的作用：
1. overflow: hidden 表示溢出内容隐藏。
2. text-overflow: ellipsis 表示超出文本宽度限制时使用省略号代替。
3. white-space: nowrap 表示空白部分不往下拉，而是横向填满整个盒子。

示例：

<div style="width: 100px">
   <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
       我是长串文本我是长串文本我是长串文本我是长串文本我是长串文本我是长串文本
   </p>
</div>

2. CSS 下三角形

三角形一般用于各种图标或者箭头的制作，是一个非常常用的图形。在Bootstrap3.0下的样式中没有直接提供，那么我们可以通过CSS3中多边形技术实现。

实现方式：

{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
}

这里通过border的处理方式生成一个三角形，注意的是三角形应该考虑方向。

示例：

<div style="width: 0; height: 0; border-top: solid 10px green; border-left: solid 10px transparent; border-right: solid 10px transparent;"></div>

以上就是我们对于 Bootstrap3.0 学习笔记之 CSS 相关补充的攻略。通过以上几个例子，可以帮助大家了解 CSS 中一些常见的处理方式，灵活地运用在Bootstrap3.0开发当中，提高显著的开发效率。