-
mark~查看全部
-
导航（胶囊形(pills)导航） 胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可： 代码如下：<ul class="nav nav-pills"> <li class="active"><a href="##">商品介绍</a></li> <li><a href="##">规格参数</a></li> <li><a href="##">商品评价</a></li> <li><a href="##">售后保证</a></li> </ul>查看全部
-
列表--水平定义列表 水平定义列表就像内联列表一样，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时，将会显示三个省略号 其用法如下： <dl class="dl-horizontal"> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd> <dt>慕课网</dt> <dd>一个专业的，真心实意在做培训的网站</dd> <dt>我来测试一个标题，我来测试一个标题</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> </dl> 宽屏下的效果（屏幕大于768px）： dt、dd会显示为一行 当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。 dt、dd会显示为两行查看全部
-
控制模态框的显示的相关属性查看全部
-
导航（标签形tab导航） <ul class="nav nav-tabs"> <li class="active"><a href="##">商品介绍</a></li> <li><a href="##">规格参数</a></li> <li><a href="##">商品评价</a></li> <li><a href="##">今后保证</a></li> </ul>查看全部
-
导航（基础样式） ul class="nav nav-tabs"查看全部
-
向上弹起的下拉菜单 有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名（当然，如果是普通向上弹出下拉菜单，你只需要在“dropdown”类名基础上追加“dropup”类名即可） 代码如下： <div class="btn-group dropup"> <button class="btn btn-default drepdown-toggle" data-toggle="dropdown" type="button">按扭下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按扭下拉菜单</a></li> <li><a href="##">按扭下拉菜单</a></li> <li><a href="##">按扭下拉菜单</a></li> <li><a href="##">按扭下拉菜单</a></li> </ul> </div>查看全部
-
列表--去点列表： 通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。查看全部
-
按钮的向下向上三角形 按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”。 有的时候我们的下拉菜单会向上弹起（接下来一个小节会介绍），这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名） dropup查看全部
-
列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示：查看全部
-
按钮（等分按钮） 等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名 代码如下： <div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">首页</a> <a class="btn btn-default" href="#">产品展示</a> <a class="btn btn-default" href="#">案例分析</a> <a class="btn btn-default" href="#">新闻中心</a> <a class="btn btn-default" href="#">商务平台</a> <a class="btn btn-default" href="#">用血平台</a> </div> </div>查看全部
-
按钮（垂直分组） 前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可 <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div>查看全部
-
按钮（嵌套分组） 很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。 <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">收割机</a></li> <li><a href="##">电动机</a></li> <li><a href="##">拖拉机</a></li> <li><a href="##">电动机</a></li> </ul> </div>查看全部
-
按钮（按钮工具栏） 在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组查看全部
-
按钮（按钮组）结合图标，完成一组按钮组效果查看全部
举报
0/150
提交
取消