-
表格--斑马线表格 有时候为了让表格更具阅读性，需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只需要在<table class="table">的基础上增加类名“.table-striped”即可： <table class="table table-striped"> … </table> 其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。 源码请查看bootstrap.css文件第1465行~第1468行： .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }查看全部
-
表格--基础表格 大家对表格并不太陌生，但对于Bootstrap中的表格如何使用，或许还有点陌生，接下来的内容，将根据不同的表格类型向大家介绍Bootstrap表格的实际使用方法。 对表格的结构，跟我们平时使用表格是一样的： <table> <thead> <tr> <th>表格标题</th> … </tr> </thead> <tbody> <tr> <td>表格单元格</td> … </tr> … </tbody> </table> 如无特别声明，下面介绍表格类型的时候，结构都是类似上面的代码。 基础表格 在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在<table>元素上添加“.table”类名，就可以得到Bootstrap的基础表格： <table class="table"> … </table> Bootstrap的基础表格，大致长得像下图所示的样子： 主要源码查看bootstrap.css文件第1402行～第1441行，由于代码太长，此处不一一列举。 “.table”主要有三个作用： ☑ 给表格设置了margin-bottom:20px以及设置单元内距 ☑ 在thead底部设置了一个2px的浅灰实线 ☑ 每个单元格顶部设置了一个1px的浅灰实线查看全部
-
Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示： 其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果： <tr class="active"> <td>…</td> </tr> 对应的源码，请查看bootstrap.css文件中第1484行~第1583行。 特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。 注意要实现悬浮状态，需要在<table>标签上加入table-hover类。 如下代码： <table class="table-hover">查看全部
-
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，对应的文件是 tables.less ☑ Sass版本，对应的文件是 _tables.scss 如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长，此处不一一列举。 刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括： ☑ .table：基础表格 ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格查看全部
-
代码（二） 正如前面所示，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。 /*源码请查看bootstrap.css第731行~第734行*/ .pre-scrollable { max-height: 340px; overflow-y: scroll; }查看全部
-
代码（一） 本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格： 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码 预编译版本的Bootstrap将代码的样式单独提取出来： 1、LESS版本，请查阅code.less文件 2、Sass版本，请查阅_code.scss文件 编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。 在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、<code>：一般是针对于单个单词或单个句子的代码 2、<pre>：一般是针对于多行代码（也就是成块的代码） 3、<kbd>:一般是表示用户要通过键盘输入的内容 虽然不同的类型风格不一样，但其使用方法是类似的。 code风格： <div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div> pre风格： <div> <pre> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </pre> </div> kbd风格： <div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div> 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好，例如查看右侧代码编辑器上的15-19行。查看全部
-
列表--水平定义列表 水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。 /*源码请查看bootstrap.css文件第608行~第621行*/ @media (min-width: 768px) { .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; } } 此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式： 1、将dt设置了一个左浮动，并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px，达到水平的效果 3、当标题宽度超过160px时，将会显示三个省略号查看全部
-
列表--定义列表 对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。 /*源码请查看bootstrap.css文件第594行~第607行*/ dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; } 对于定义列表使用，其实很简单，与我们以前的使用定义列表的方法是相同的： <dl> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客</dd> <dt>慕课网</dt> <dd>一个真心在做教育的网站</dd> </dl>查看全部
-
列表--内联列表 Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。 /*源码查看bootstrap.css文件第584行~第593行*/ .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } 看个示例： <ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>查看全部
-
列表--去点列表 小伙伴们可以看到，在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。 /*源码请查看bootstrap.css文件第580行~第583行*/ .list-unstyled { padding-left: 0; list-style: none; } 从示例中可以看出，除了项目编号之外，还将列表默认的左边内距也清０了。查看全部
-
列表--无序列表、有序列表 无序列表 无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行： ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 从源码上我们可以得知，Bootstrap对于列表，只是在margin上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。 列表嵌套 在Bootstrap中列表也是可以嵌套的，如右侧编辑器中的代码就是有序列表（25-35行）。查看全部
-
列表--简介 在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下： 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootstrap根据平时的使用情形提供了六种形式的列表： ☑ 普通列表 ☑ 有序列表 ☑ 去点列表 ☑ 内联列表 ☑ 描述列表 ☑ 水平描述列表 接下来，我们一起来学习Bootstrap提供的这六种列表的使用方法。查看全部
-
文本对齐风格 在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格： ☑ 左对齐，取值left ☑ 居中对齐，取值center ☑ 右对齐，取值right ☑ 两端对齐，取值justify 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格： ☑ .text-left：左对齐 ☑ .text-center：居中对齐 ☑ .text-right：右对齐 ☑ .text-justify：两端对齐 具体源码查看bootstrap.css文件第488行~第499行： .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }查看全部
-
强调相关的类 在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; }查看全部
-
斜体 在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。 例如，下面的代码使用了<em>和<i>标签定义了强调文本： <p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>查看全部
举报
0/150
提交
取消