`
yumo12
  • 浏览: 18485 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Bootsrap之组件

阅读更多
一、Glyphicons字体图标
1、使用
(1)图标和文本之间要加空格
(2)不要和其他组件混合使用,要创建一个嵌套的<span>标签,将图标类用到它上面
(3)只对内容为空的元素起作用
(3)改变图标字体文件的位置: . . /fonts/  
         如果修改位置,应在Less源码文件中修改@icon-font-path和/或@icon-font-name变量
         利用Less编译器提供的相对URL地址选项
         修改预编译CSS文件中的url()地址
2、例子
<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span> Star
</button>
二、下拉菜单
1、例子:将下拉菜单触发器和下拉菜单都包在.dropdown里
2、对齐
右对齐:为.dropdown-menu添加.dropdown-menu-right。不建议用.pull-right类。
              导航条中需要,用.pull-right的mixin版本。
3、标题:<li class="dropdown-header"></li>标明一组动作
4、分割线:<li role="presentation" class="divider"></li>
5、禁用的菜单项:<li role="presentation" class="disabled"></li>
三、按钮组
为.btn-group中的元素应用工具提示或弹出框时,须指定container:'body'选项
1、基本实例
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
2、按钮工具栏
<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">...</div>
    <div class="btn-group">...</div>
</div>
3、尺寸:<div class="btn-group btn-group-lg/md/sm/xs">…</div>
4、嵌套:把.btn-group放入另一个.btn-group中
5、垂直排列:包在<div class="btn-group-vertical"></div>中
6、两端对齐排列的按钮组
(1)<a>元素:将.btn元素包在<div class="btn-group btn-group-justified"></div>中
(2)<button>元素:将每个按钮包进一个按钮组中
四、按钮式下拉菜单
将任意一个按钮放在.btn-group中,然后加入适当的菜单标签
1、单按钮下拉菜单
<div class=" btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle"></button>
</div>
2、分裂式按钮下拉菜单
<div class="btn-group">
    <button type="button" class="btn btn-danger"></button>
    <button type="button" class="btn btn-danger dropdown-toggledata-toggle="dropdown"></button>
</div>
3、尺寸
<div class="btn-group">
    <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown"></button>
</div>
4、向上弹出式菜单:父元素加 .dropup
<div class="btn-group dropup">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
</div>
五、输入框组
  在<input>前/后加文字或按钮实现扩展,为.input-group赋予 .input-group-addon类即可添加额外元素
  工具提示和弹出卡U那个需要特别设置:container:'body' 参数
  不要和其他组件混用
1、基本实例
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username" />
    <span class="input-group-addon">.00</span>
</div>
2、尺寸:为 .input-group添加相应尺寸类,内部元素自动调整尺寸
<div class="input-group input-group-lg"></div>
3、作为额外元素的多选框和单选框
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox/radio" />
    </span>
    <input type="text" class="form-control" />
</div>
4、作为额外元素的按钮
     为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon,而是添加 .input-group-btn 包裹按钮元素
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">按钮</button>
    </span>
    <input type="text" class="form-control" />
</div>
5、作为额外元素的按钮式下拉菜单
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            "Action"
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
       </ul>
    </div>
</div>
6、作为额外元素的分裂式按钮下拉菜单
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex='-1'></button>
        <button type="button" class="btn btn-default dropdown-toggledata-toggle="dropdown" tabindex='-1'>
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menurole="menu">
            <li>…</li>
        </ul>
    </div>
</div>
六、导航   .nav
1、标签页
(1).nav-tabs依赖 .nav类
(2)<ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">profile</a></li>
            <li role="presentation"><a href="#">profile</a></li>
        </ul>
(3)需要用标签页的javaScript插件
2、胶囊式标签页
(1)其他同上,但是使用.nav-pills类
(2)也可以垂直方向:添加 .nav-stacked类-------<div class="nav nav-pills nav-stacked"></div>
3、两端对齐的标签页
<ul class="nav nav-tabs nav-justified" role="tablist">
    <li role="presentation" class="active">
        <a href="#">Home</a>
    </li>
</ul>
4、禁用的链接----链接功能不受影响----
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
5、添加下拉菜单
用一点额外html代码并加入下拉菜单插件的JavaScript插件
带下拉菜单的胶囊式标签页:
<ul class="nav navpills" role="tablist">
    <li role=presentation" class="dropdown">
        <a class="dropdown-toggledata-toggle="dropdown" href="#">
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menurole="menu">
        </ul>
    </li>
七、导航条
1、默认样式的导航条
内容折行怎么办?
(1)减少元素宽度、在某些尺寸的屏幕上隐藏一些元素
(2)JavaScript
(3)修改视口的阈值:@grid-float-breakpoint   比它大时水平排列,比它小时折叠排列
2、Brand image
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="...">
          </a>
        </div>
     </div>
</nav>
3、表单
将表单放置在.nav-form
<form class="nav-form nav-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="search" />
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
4、按钮
在<form>外的<button>加上.navbar-btn,可让它在导航条垂直居中
<button type="button" class="btn btn-default navbar-btn">按钮</button>
5、文本
把文本包裹在.navbar-text中时,常用<p>标签
<p class="navbar-text"></p>
6、非导航的链接
使用.navbar-link类:<p class="navbar-left navbar-right">段落内容<a href="#" class="navbar-link">链接</a></p>
7、组件排列
通过添加.navbar-left和.navbar-right类让导航链接、表单、按钮或文本对齐。
导航条不支持多个.navbar-right类
8、固定在顶部------- .navbar-fixed-top
还可包含一个.container或.container-fluid容器,从而让导航条居中,并在两侧添加padding
<nav class="navbar navbar-default navabar-fixed-top" role="navigator">
    <div class="container">
    </div>
</nav>
需要为body元素设置padding
9、固定在底部------ .navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
    </div>
</nav>
10、静止在顶部----- .navbar-static-top
添加.navbar-static-top类,即可创建一个与页面等宽的导航条,随页面向下滚动而消失。
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
    </div>
</nav>
11、反色的导航条----- .navbar-inverse
<nav class="navbar navbar-inverse" role="navigation"></nav>
八、路径导航
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过css的:before和content属性添加了。
九、分页
1、默认分页
<nav>
  <ul class="pagination pagination-lg/sm">
    <li><a href="#">&laquo;</a></li>
    <li class="disabled"><a href="#">1</a></li>  //此处的a也可换成<span>标签,可以保持需要的样式并移除点击功能
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>
2、翻页
<nav>
    <ul c;ass="pager">
        <li class="previous disabled"><a href="#">previous</a></li>
        <li class="next"><a href="#">next</a></li>
    </ul>
</nav>
十、标签
<span class="label label-default/primary/success/info/warning/danger" /></span>
如果标签数量多,就要为每个标签设置为display:inline-block;
十一、徽章
给链接、导航等元素嵌套<span class="badge">元素。如果没有未读信息,徽章组件自动隐藏(IE8除外)
<ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active">
        <a href="#">Home<span class="badge">12</span></a>
    </li>
    <li role="presentation">
        <a href="#">Home</a>
    </li>
    <li role="presentation">
        <a href="#">Home<span class="badge">3</span></a>
    </li>
</ul>
十二、巨幕
<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果要让巨幕组件和浏览器同宽且无圆角,请把此组件放在所有.container外,且在组件里添加一个.container元素。
<div class="jumbottron">
    <div class="container"></div>
</div>
十三、页头----page-header
为h1标签增加适当空间,并支持h1标签内嵌small元素的默认效果和大部分其他组件
<div class="page-header">
    <h1>标题<small>小标题</small></h1>
</div>
十四、缩略图
1、默认样式
<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="…" />
        </a>
    </div>
    …
</div>
2、自定义内容------添加额外标签,可加入任何类型的html内容
<div class="row">
    <div class="col-sm-6 col-md-4">
        <img data-src="holder.js/300x300" alt="…" />
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>
                <a href="#" class="btn btn-primary" role="button">按钮</a>
                <a href="#" class="btn btn-default" role="button">按钮2</a>
            </p>
        </div>
    </div>
</div>
十五、警告框
1、例子
.alert类是必须设置的,另外还有.alert-success/info/warnimg/danger四个类,没有默认类
<div class="alert alert-success" role="alert">…</div>
2、可关闭的警告框------- .alert-dismissible
如果提供该功能,要用jQuery警告框插件
务必给<button>添加data-dismiss="alert"属性
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">内容</span>
        <span class="sr-only">关闭</span>
    </button>
    <strong>Warning!</strong>
    Better check yourself, you're not looking too good.
</div>
3、警告框中的链接------.alert-link
<div class="alert alert-success" role="alert">
    <a href="#" class="alert-link">. . . </a>
</div>
十六、进度条
IE9及以下不支持
1、基本实例
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
    <span class="sr-only">60% complete</span>
</div>
2、带提示标签的
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
</div>
3、进度值较低的情况----min-width:20px;
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:2%;">
    2%
    </div>
</div>
4、根据情景变化效果-----progress-bar-success/info/warning/danger
<div class="progress">
    <div class="progress-bar progress-bar-success/info/warnimg/danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
        <span class="sr-only">20% complete</span>
    </div>
</div>
5、条纹效果(IE8不支持)-----progress-bar-striped
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
        <span class="sr-only">40% complete</span>
    </div>
</div>
6、动画效果---- .active
<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
        <span class="sr-only">40%</span>
    </div>
</div>
7、堆叠效果
<div class="progress">
    <div class="progress-bar progress-bar-success" style="35%">
        <span class="sr-only">35 complete</span>
    </div>
    <div class="progress-bar progress-bar-success" style="20%">
        <span class="sr-only">20 complete</span>
    </div>
    <div class="progress-bar progress-bar-success" style="10%">
        <span class="sr-only">10 complete</span>
    </div>
</div>
十七、媒体对象
1、默认
允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)
<div class="media">
     <a class="media-left" href="#">
         <img src="..." alt="...">
      </a>
      <div class="media-body">
           <h4 class="media-heading">Media heading</h4>
           ...
       </div>
</div>
2、媒体对象列表
<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>
.media-right应在.media-body后面
用一点额外标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。
十八、列表组
1、基本实例
<ul class="list-group">
    <li class="list-group-item">内容</li>
</ul>
2、徽章
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </li>
</ul>
3、链接
分别用div代替ul,用a代替li
<div class="list-group">
    <a href="#" class="list-group-item active">内容</a>
    <a href="#" class="list-group-item">内容</a>
    <a href="#" class="list-group-item">内容</a>
</div>
4、被禁用的条目
<div class="list-group">
    <a href="#" class="list-group-item disabled">内容</a>
</div>
5、情境类
<ul class="list-group">
    <li class="list-group-item list-group-item-success/info/warning/danger">内容</li>
</ul>
6、定制内容
<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>
十九、面板
1、基本实例
默认的.panel组件只是设置border和padding
<div class="panel panel-default">
    <div class="panel-body">内容</div>
</div>
2、带标题的面板---panel-heading
<div class="panel panel-default">
    <div class="panel-heading">标题</div>
</div>
如果为链接设置颜色,一定要把链接放在带.panel-title类的标题标签里
3、带脚注的面板----按钮或次要文本放入.panel-footer容器内
3、情境效果
<div class="panel panel-primary/success/info/warning/danger">...</div>
4、带表格的面板
不需要边框的表格添加.table类,如果有.panel-body的面板,为上方添加边框会有分隔效果
5、带列表组的面板
<div class="panel panel-default">
    <div class="panel-heading"></div>
    <div class="panel-body"></div>
    <ul class="list-group">
        <li class="list-group-item"></li>
    </ul>
</div>
二十、具有响应式特性的嵌入内容
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>
embed-responsive-item类:让最终样式与其他属性相匹配。
二一、Well
<div class="well">...</div>-----能有嵌入的简单效果
如果添加well-sm/lg等,可以控制其padding和圆角设置
<div class="well well-sm/lg">...</div>
分享到:
评论

相关推荐

    bootstrap之组件demo

    Bootstrap下的组件datagrid使用demo试例,简单易于消化!

    Axure8 的 Bootstrap4 组件库

    Bootstrap4 是一个流行的前端开发框架,它为网页设计师和开发者提供了快速构建响应式、移动优先项目的工具和组件。Axure RP 8 是一款原型设计工具,允许用户通过拖拽组件来创建交互式的设计原型。"Axure8 的 ...

    bootstrap的datagrid组件

    Bootstrap的DataGrid组件是一款强大的数据展示工具,它充分利用了Bootstrap框架的灵活性和美观性,为开发者提供了便捷的方式来呈现和操作表格数据。这个组件是专为Web应用设计的,旨在简化数据的分页、条件查询以及...

    Bootstrap常用组件封装BootstrapQ.zip

    3.Bootstrap 周边优秀组件封装,让Bootstrap更丰满,使用更简单; 4.压缩后仅5.5k BootstrapQ 对 bootstrap 做了一些封装,可以使大家使用更方便,如下: 1.封装了alert 2.封装了confirm 3.封装了dialog 4....

    Axure Bootstrap 3 组件

    一旦导入成功,这些Bootstrap组件就会出现在库面板中,设计师可以拖放它们到工作区,快速搭建具有Bootstrap风格的原型界面。 Bootstrap 3 的关键特性包括: 1. **响应式布局**:Bootstrap 3 提供了一个流式网格...

    Bootstrap分页组件的设计

    Bootstrap 分页组件的设计 Bootstrap 分页组件的设计是基于 Bootstrap 前端开发框架,简单设计了前端分页控件。该组件提供了一个基本的分页控件,能够满足大多数情况下的分页需求。 分页组件的结构 分页组件的...

    bootstrap相关组件文件全集

    Bootstrap是世界上最受欢迎的前端开发框架之一,它极大地简化了网页设计和开发流程。这个"bootstrap相关组件文件全集"包含了Bootstrap 3.3.7版本的所有核心组件和资源,是前端开发者的重要工具箱。 Bootstrap 3.3.7...

    Bootstrap按钮组件详解

    在深入探讨Bootstrap按钮组件之前,需要明确一点,Bootstrap按钮组件的运作依赖于button.js插件,这一点对于组件能够正常工作至关重要。 ### 按钮组件的基本结构 按钮组件的基本结构主要通过HTML的`&lt;button&gt;`元素...

    Bootstrap4_for_Axure 组件库 Axure8 Axure9 亲测有效

    5. **响应式布局(Responsive Layout)**:Bootstrap4的强大之处在于其响应式设计,可以适应不同设备的屏幕尺寸。Axure中的组件库也考虑了这一特性,各个组件都具备响应式调整的能力,确保在手机、平板、桌面等不同...

    用Vue2实现的Bootstrap3组件

    在这个“用Vue2实现的Bootstrap3组件”的项目中,开发者将Vue2的强大功能与Bootstrap3的美学和实用性相结合,创建了一套可复用的UI组件。 首先,让我们深入了解Vue2的关键特性。Vue2的核心理念是组件化,它允许...

    bootstrap分页组件 bootstrap-paginator-master

    Bootstrap分页组件是Web开发中常见的一种功能,用于在大量数据中进行页面切换,提高用户体验。Bootstrap-Paginator是一个专门针对Bootstrap框架设计的轻量级分页插件,它能够帮助开发者快速、便捷地在网页应用中实现...

    bootstrap二维码组件

    Bootstrap二维码组件是Web开发中一个实用的工具,它利用了流行的Bootstrap框架的样式和灵活性,为网站添加生成和展示二维码的功能。Bootstrap是一个广泛使用的前端开发框架,它提供了一套响应式设计、移动设备优先的...

    基于Angular的Bootstrap4组件NGBootstrap

    NG Bootstrap提供了与Angular无缝集成的Bootstrap组件,这些组件原生支持Angular的特性,如模板驱动和响应式设计,使得在Angular项目中使用Bootstrap变得更加简单。 **NG Bootstrap的主要组件及特点** 1. **模态框...

    基于Bootstrap table组件实现多层表头的实例代码

    Bootstrap Table是一个功能强大的表格组件,它提供了许多有用的功能,包括多层表头的实现。在本文中,我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头,每个...

    bootstrap-notifications, Bootstrap 框架的通知组件.zip

    bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications ...快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:下载

    基于Bootstrap样式的分页组件(可以自己改样式)

    基于Bootstrap样式的分页组件

    bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下

    bootstrap-datetimepicker时间组件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件,它提供了美观、易用的用户界面,用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本,确保了与不同Bootstrap设计...

Global site tag (gtag.js) - Google Analytics