Bootstrap学习总结解析.docx

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