-
面板--彩色面板 在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板： ☑ panel-primary：重点蓝 ☑ panel-success：成功绿 ☑ panel-info:信息蓝 ☑ panel-warning：警告黄 ☑ panel-danger：危险红 使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名查看全部
-
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 </div> <div class="panel-footer">作者:大漠</div> </div> <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 </div> <div class="panel-footer">作者:大漠</div> </div>查看全部
-
☑ list-group-item-success：成功，背景色绿色 ☑ list-group-item-info：信息，背景色蓝色 ☑ list-group-item-warning：警告，背景色为黄色 ☑ list-group-item-danger：错误，背景色为红色查看全部
-
Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名： ☑ active：表示当前状态 ☑ disabled：表示禁用状态查看全部
-
ootstrap框加在链接列表组的基础上新增了两个样式： ☑ list-group-item-heading：用来定义列表项头部样式 ☑ list-group-item-text：用来定义列表项主要内容查看全部
-
列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。查看全部
-
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">系列：十天精通CSS3</h4> <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div> </div> </div> 媒体对象--默认媒体对象 媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容查看全部
-
下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名查看全部
-
<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。查看全部
-
一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格： 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码 在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、<code>：一般是针对于单个单词或单个句子的代码 2、<pre>：一般是针对于多行代码（也就是成块的代码） 3、<kbd>:一般是表示用户要通过键盘输入的内容查看全部
-
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。 此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式： 1、将dt设置了一个左浮动，并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px，达到水平的效果 3、当标题宽度超过160px时，将会显示三个省略号 <dl class="dl-horizontal"> <dt>标题一:</dt> <dd>描述内容</dd> <dt>标题二:</dt> <dd>描述内容</dd> </dl>查看全部
-
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。 <dl> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客</dd> <dt>慕课网</dt> <dd>一个真心在做教育的网站</dd> </dl>查看全部
-
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。除了项目编号之外，还将列表默认的左边内距也清０了。查看全部
-
Bootstrap对于列表，只是在margin上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。在Bootstrap中列表也是可以嵌套的查看全部
-
通过bootstrap-dropdown.js插件可以将下拉菜单加入到任何其他组件中，包括导航条、标签页。 调用方式： 通过data属性 在链接或按钮上添加data-toggle="dropdown"即可切换下拉菜单： <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 为了保证URL符合规范，请使用data-target属性来代替href="#"： <div class="dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div>查看全部
举报
0/150
提交
取消