Dreamweaver如何使用标签资源库

很多人都不知道标签库,现在我们来看看,Dreamweaver如何使用标签资源库。

之前学了一点bootstrap框架的基本知识,学习之余做了一点笔记,以防忘记~

在菜单按钮下方,我们点击标签库按钮。

1)加载顺序

图片 1

  1. 加载Bootstrap层叠样式表:bootstrap.min.css
  2. jQuery库,同时加载该库必须在加载bootstrap.min.js之前: jquery.min.js
  3. 加载bootstrap的核心js库 bootstrap.min.js

  4. 字体图标
    使用`标签 在里面添加class="字体图片对应的类名"` 即可

或者,我们可以使用+热键L。

3) 按钮
一般按钮类写法 <button type="button" class="btn btn-default">按钮</button>
其中有几种类型的按钮 分别显示不同的颜色或样式:
class="btn btn-default" 默认按钮
class="btn btn-primary" 蓝色按钮
class="btn btn-success"绿色成功按钮
class="btn btn-danger" 红色危险按钮
class="btn btn-warning" 橙色警告按钮
class="btn btn-info" 浅蓝信息按钮
class="btn btn-link" 链接按钮

图片 2

按钮大小:大 btn-lg 正常按钮 btn-defaultbtn-sm 特小 btn-xs

然后我们会看到页面中央弹出这个标签的编辑器。

4)下拉菜单
定义dropdown类

图片 3

<div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <!-- 下拉选项标题 -->
      <li class="dropdown-header">Dropdown header</li>
      <!-- 下拉选项 -->
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <!-- 设置禁用点击 -->
      <li class="disabled"><a href="#">Something else here</a></li>
      <!-- 分割线 -->
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
 </div>

我们能够在这里添加删除标签。

5)下拉菜单
使用方法:
在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。我们来简单的看看:
1、使用一个名为"dropdown"的容器包裹了整个下拉菜单元素,示例中为:

还能在这里进行标签格式的换行。

     <div class="dropdown"></div>

图片 4

2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:

本文由优信彩票购彩大厅发布于互联网资讯,转载请注明出处:Dreamweaver如何使用标签资源库

您可能还会对下面的文章感兴趣: