组件(一)

  • 组件

  1. Glyphicons 字体图标

    <h2><span class="glyphicon glyphicon-hand-left"></span>你好!</h2>

    截图:

  2. 下拉菜单:
    <div class="dropdown">
        <button class="btn btn-danger" data-toggle="dropdown">更多<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
        </ul>
    </div>

    截图:

  3. 上拉菜单
    <div class="dropup">
        <button class="btn btn-danger" data-toggle="dropdown">更多<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
            <li> <a>百度</a></li>
        </ul>
    </div>
  4. 菜单对齐

    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
      ...
    </ul>
    
    <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dLabel">
      ...
    </ul>
  5. 菜单标题

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
      ...
      <li class="dropdown-header">Dropdown header</li>
      ...
    </ul>
  6. 菜单分割线

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
      ...
      <li role="separator" class="divider"></li>
      ...
    </ul>
  7. 禁用菜单项

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
      <li><a href="#">Regular link</a></li>
      <li class="disabled"><a href="#">Disabled link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>
  8. 按钮组:一组按钮

    <div class="btn-group" >
      <button class="btn btn-default">Left</button>
      <button class="btn btn-default">Middle</button>
      <button class="btn btn-default">Right</button>
    </div>
  9. 按钮组工具栏

    <div class="btn-toolbar" >
      <div class="btn-group" >...</div>
      <div class="btn-group" >...</div>
      <div class="btn-group" >...</div>
    </div>
  10. 按钮组尺寸:只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。

    <div class="btn-group btn-group-lg">...</div>
    <div class="btn-group" role="group">...</div>
    <div class="btn-group btn-group-sm">...</div>
    <div class="btn-group btn-group-xs">...</div>
  11. 嵌套:想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。

    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
  12. 垂直按钮组:

    <div class="btn-group-vertical" >
      ...
    </div>
  13. 分裂式下拉菜单

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <!--没有压缩的,即是没有去除空格和换行,方便学习-->
            <link rel="stylesheet" href="bs/css/bootstrap.css" />
            <!--
                压缩版的,去除了空格和换行,文件小,省带宽
            <link rel="stylesheet" href="bs/css/bootstrap.min.css" />
    
            -->
            <!--要使用bootstrap的js插件,必须有jquery的支持-->
            <script type="text/javascript" src="js/jquery.min.js" ></script>
            <!--bootstrap的主包,同样bootstrap.min.js是压缩版-->
            <script type="text/javascript" src="bs/js/bootstrap.js" ></script>
            <style>
                *{
                    font-family: 微软雅黑;
                }
                img{
                    background: #ccc;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1 class="page-header">BootStrap前端框架</h1>
                <div class="btn-group">
                    <button class="btn btn-default">Default</button>
                    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a>百度</a></li>
                        <li><a>百度</a></li>
                        <li><a>百度</a></li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

    截图:

  14. 单按钮下拉菜单
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <!--没有压缩的,即是没有去除空格和换行,方便学习-->
            <link rel="stylesheet" href="bs/css/bootstrap.css" />
            <!--
                压缩版的,去除了空格和换行,文件小,省带宽
            <link rel="stylesheet" href="bs/css/bootstrap.min.css" />
    
            -->
            <!--要使用bootstrap的js插件,必须有jquery的支持-->
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <!--bootstrap的主包,同样bootstrap.min.js是压缩版-->
            <script type="text/javascript" src="bs/js/bootstrap.js"></script>
            <style>
                * {
                    font-family: 微软雅黑;
                }
    
                img {
                    background: #ccc;
                }
            </style>
        </head>
    
        <body>
            <div class="container">
                <h1 class="page-header">BootStrap前端框架</h1>
                <div class="btn-group">
                    <button class="btn btn-default dropdown" data-toggle="dropdown">更多<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li>
                            <a>百度</a>
                        </li>
                        <li>
                            <a>百度</a>
                        </li>
                        <li>
                            <a>百度</a>
                        </li>
                    </ul>
                </div>
    
            </div>
        </body>
    
    </html>

    截图:

原文地址:https://www.cnblogs.com/PCBullprogrammer/p/10364561.html

时间: 02-12

组件(一)的相关文章

Android零基础入门第62节:搜索框组件SearchView

原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输入完成后提交搜索时,也可通过监听器执行实际的搜索. SearchView默认是展示一个search的icon,点击icon展开搜索框,也可以自己设定图标.用SearchView时可指定如下表所示的常见XML属性及相关方法. 如果为SearchView增加一个配套的ListView,则可以为Se

Android 设计一个菱形形状的Imageview组件.

网上没有资料,特来请教下大神 Android 设计一个菱形形状的Imageview组件. >> android 这个答案描述的挺清楚的:http://www.goodpm.net/postreply/android/1010000007107851/Android设计一个菱形形状的Imageview组件.html

1433修复命令大全提权错误大全_cmd_shell组件修复

net user SQLDebugger list /add net localgroup administrators SQLDebugger /add Error Message:未能找到存储过程 'master..xp_cmdshell'. 修复法:很通用的,其实碰到 其他126 127的都可以一起修复, 除了xplog70.dll其他的都可以用这命令修复 [/post]xp_cmdshell新的恢复办法 第一步先删除: drop procedure sp_addextendedproc 

微信小程序------媒体组件(视频,音乐,图片)

今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1:图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 widthFix:宽度不变,高度自动变化,保持原图宽高比不变 aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来. 也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取. aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来.

微信小程序------基本组件

今天主要是简单的讲一下小程序当中的一些组件,微信文档上也是有的.但我还是坚持写一下,因为写博客可以再一次得到提高,印象更深刻,虽然很简单,但贵在坚持. 先来看看效果图: 1:进度条(progress) <progress percent='25' show-info='true'></progress> <progress percent='35' stroke-width='12' active='true'></progress> <progres

Django之Form组件

Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 from django.forms import Form from django.forms import widgets from django.forms import fields class MyForm(Form): user = fields.CharField( widget=widgets.Tex

Django之ModelForm组件

1.Django之ModelForm组件 ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 labels=None, # 提示信息 help_texts=None, # 帮助提示信息 widgets=None, # 自定义插件 error_messages=None, # 自定义错误信息(整体错误信息from django.core.exceptions import NON_FIE

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Echares入门(1)——常用图组件

Option对象 --组件 1.标题:title 标题组件:Text ,标题文字 subtext,子标题 left,距离左边的像素值,也可以是,center,left,right但要加单引号 borderColor,边框的颜色 borderWidth,边框的宽度 textstyle,自定义配置等 2.工具栏组件:toolbox(显示附加的一些功能) Show,是否显示,ture Feature,具体显示的功能 Feature:{  } saveAslmage,保存图片 Restore,还原 da

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re