Bootstrap学习课稿.docx

Bootstrap 学$ 强调内容在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。 Bootstrap 同样对这部分做了一些轻量级的处理。如果想让一个段落 p突出显示,可以通过添加类名“.lead ”实现,其作用就是增大文本字号,加粗文本,而且对行高和 margin 也做相应的处理。用法如下: <p> 我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本, </p> <p class="lead" > 我是特意要突出的文本, 我的样子成这样。我是特意要突出的文本, 我的样子长成这样。</p> 效果查看最右侧结果窗口。“.lead ”对应的样式如下: /*源码查看 文件第 470 行~480 行*/ .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: ; } ***@media (min-width: 768px) {/* 大中型浏览器字体稍大*/ .lead { font-size: 21px; }}除此之外, Bootstrap 还通过元素标签: <small> 、<strong> 、<em> 和<cite> 给文本做突出样式处理。/*源码查看 文件第 55 行~第 58 行*/ b,strong { font-weight: bold; /* 文本加粗*/ } /*源码查看 文件第 481 行~第 484 行*/ small,.small { font-size: 85%; /* 标准字体的 85%, 也就是 14px * ,差不多 12px*/ } /*源码查看 第 485 行~第 487 行*/ cite { font-style: normal; } $ .粗体粗体就是给文本加粗,在普通的元素中我们一般通过 font-weight 设置为 bold 关键词给文本加粗。在 Boot strap 中,可以使用<b> 和<strong> 标签让文本直接加粗。/*源码查看 文件第 55 行~第 58 行*/ b,strong { font-weight: bold; /* 文本加粗*/ }例如,下面的代码使用<strong> 标签定义了强调文本: <p> 我在学习<strong> Bootstrap </strong> ,我要掌握<strong> Bootstrap </strong> 的所有知识。</p> $ 斜体在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。斜体类似于加粗一样,除了可以给元素设置样式 font-style 值为 italic 实现之外,在 Bootstrap 中还可以通过使用标签<em> 或<i> 来实现。例如,下面的代码使用了<em> 和<i> 标签定义了强调文本: <p> 我在慕课网上跟<em> 大漠</em> 一起学习<i> Bootstrap </i> 的使用。我一定要学会<i> Boo tstrap </i> 。</p> $ 强调相关的类在 Bootstrap 中除了使用标签<strong> 、<em> 等说明正文某些字词、句子的重要性, Bootstrap 还定义了一套类名,这里称其为强调类名(类似前面说的“.lead ”),这些强调类都是通过颜色来表示强调,具本说明如下: ?.text-muted :提示,使用浅灰色( #999 ) ?.text-primary :主要,使用蓝色( #428bca ) ?.text-ess :成功,使用浅绿色(#3c763d) ?.text-info :通知信息,使用浅蓝色( #31708f ) ?.text-warning :警告,使用黄色( #8a6d3b ) ?.text-danger :危险,使用褐色( #a94442 ) 具本源码查看 文件第 500 行~第 532 行: .text-muted { color: #999; } .text-primary { color: #428bca; } -primary:hover { color: #3071a9; } .text-ess { color: #3c763d; } -ess:hover { color: #2b542c; } .text-info { color: #31708f; } -info:hover { color: #245269; } .text-warning { colo