bootstrap之组件

最新推荐文章于 2024-05-15 00:21:01 发布

刘之帅

最新推荐文章于 2024-05-15 00:21:01 发布

阅读量852

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/lzs781/article/details/76221855

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript插件操作对象寻找规则

先查找data-target属性
再查找href属性
如果都没有，则操作父元素。

小图标

<!-- 第一种方式 --><i class="glyphicon glyphicon-search"></i>
<!-- 第二种方式 --><span class="glyphicon glyphicon-search"></span>

所有的icon样式都以glyphicon-开头
使用的时候必须同时使用两个样式，
即.glyphicon和以.glyphicon-*开头的样式

输入框组与addon

文字或图标作为addon

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control"><!-- 这里的input，必须使用form-control样式才行 -->
    <span class="input-group-addon">.00</span>
</div>

.input-group-addon的span元素可以将内容衔接在输入框前后。
.input-group-{lg|sm}可以控制输入框组的大小。

复选框与单选框作为addon

<div class="input-group">
    <span class="input-group-addon"><input type="checkbox"></span>
    <input type="text" class="form-control">
</div>

按钮作为addon

这里用.input-group-btn替换.inputgroup-addon作为新的addon容器。
示例用法如下：

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
</div>

下拉菜单作为addon

很自然，能支持普通按钮，也就能支持下拉菜单按钮，只需要在普通的.btn按钮上应用一个data-toggle=”dropdown”属性即可。示例代码如下：

<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">...</ul>
    </div>
    <input type="text" class="form-control">
</div>

分段按钮作为addon

.input-group-btn样式里，也是可以放置多个按钮的，并且中间按钮的圆角也都会消除的。

<div class="input-group">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">按钮A</button>
        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
            <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
        </button>
        <button class="btn btn-default" type="button">按钮B</button>
        <button class="btn btn-default" type="button">按钮C</button>
        <ul role="menu" class="dropdown-menu">...</ul>
    </div>
</div>

只是有一点需要注意，所有的按钮都必须放置在.input-group-btn样式容器内。

下来菜单

建立菜单

<div class="dropdown">
    <ul  class="dropdown-menu">
        <li class="dropdown-header">翻译图书</li>
        <li class="disabled">
            <a href="#" tabindex="-1">JavaScript 编程精解</a>
        </li>
        <li>
            <a href="#" tabindex="-1">JavaScript 设计模式</a>
        </li>
        <li>
            <a href="#" tabindex="-1">JavaScript 启示录</a>
        </li>
        <li>
            <a href="#" tabindex="-1">Backbone 应用开发指南</a>
        </li>
        <li class="divider"></li>
        <li class="dropdown-header">原创图书</li>
        <li>
            <a href="#" tabindex="-1">深 入 理 解 Bootstrap</a>
        </li>
    </ul>
</div>

注意

父div容器元素应用.dropdown样式（.btn-group可以取代.dropdown）
ul元素应用.dropdown-menu
li元素不应用样式时为普通菜单选项
当li元素应用.divider样式则为分割线
当li元素应用.dropdown-header样式则为菜单标题
当li元素应用.disabled样式则禁用该菜单选项
.dropdown默认是隐藏的，需要添加.open样式才能显示出来

调用菜单

常规调用

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单触发元素</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        ...
    </ul>
</div>

用于的调用的元素可以是也可以是
无论什么元素，都需要加上data-toggle=”dropdown”元素
当用户点击带有data-toggle=”dropdown”的元素时，bootstrap.js会为该元素的父元素加上.open样式，从而实现展现下拉菜单

外部调用

<button id="btn" data-toggle="dropdown" data-target="#menutest1">外部按钮</button>
<ul class="nav nav-pills">
    <li class="dropdown" id="menutest1">
        <!--必须在父元素上设置和data-target一致的id 值，即menutest1 -->
        <ul class="dropdown-menu">
            <li>
                <a href="#">动作</a>
            </li>…
            < li class="divider"></li>
    <li>
        <a href="#">被间隔的链接</a>
    </li>
    </ul>
    </li>
</ul>

为下来菜单容器.dropdown元素设置id=”menutest1”
在button元素上，设置data-target=”#menutest1”属性，menutest1为下拉菜单容器的id。

JavaScript调用方法

<button id="btn" data-toggle="dropdown" data-target="#menutest1">外部按钮</button>
<ul class="nav nav-pills">
    <li class="dropdown" id="menutest1">
        <!--必须在父元素上设置和data-target一致的id 值，即menutest1 -->
        <ul class="dropdown-menu">
            <li>
                <a href="#">动作</a>
            </li>…
            < li class="divider"></li>
    <li>
        <a href="#">被间隔的链接</a>
    </li>
    </ul>
    </li>
</ul>

若以上面的代码为例，则JS手动调用下拉菜单的代码为：

$('#btn').dropdown();

按钮组

<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>

按钮组是将多个按钮（.btn .btn-*）放到一个按钮容器中（.btn-group）
组内按钮紧贴，容器四角为圆角
可以使用.btn-group-lg、 .btn-group-sm、 .btn-group-xs直接设置整组的尺寸
将.btn-group换成.btngroup-vertical则变成垂直排练的按钮组
在.btn-group后添加.btn-group-justified可以让按钮组自适应宽度，即宽度100%充满容器

导航（.nav）

.nav基础样式与.btn不同，不提供外观，只是一些基础设置，需要配合.nav-*

.nav {
    padding - left: 0;
    margin - bottom: 0;
    list - style: none;
    /*消除list圆点*/
}

选项卡导航（.nav-tabs）

<ul class="nav nav-tabs ">
    <li class="active">
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">个人信息</a>
    </li>
    <li class="disabled">
        <a href="#">作品</a>
    </li>
    <li>
        <a href="#">图书</a>
    </li>
</ul>

.active表示当前选项
.disabled表示禁用项

胶囊式导航（.nav-pills）

<ul class="nav nav-tabs ">
    <li class="active">
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">个人信息</a>
    </li>
    <li class="disabled">
        <a href="#">作品</a>
    </li>
    <li>
        <a href="#">图书</a>
    </li>
</ul>

堆叠式导航（.nav-pills .nav-stacked）

<ul class="nav nav-pills nav-stacked ">
    <li class="active">
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">个人信息</a>
    </li>
    <li class="disabled">
        <a href="#">作品</a>
    </li>
    <li>
        <a href="#">图书</a>
    </li>
</ul>

堆叠式导航是将胶囊式导航垂直堆放，所以只需要在.nav-pills后加上.nav-stacked即可。

导航中的分界线（.nav-divider）

<ul class="nav nav-pills nav-stacked ">
    <li class="active">
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">个人信息</a>
    </li>
    <li class="disabled">
        <a href="#">作品</a>
    </li>
    <li class="nav-divider"></li>
    <li>
        <a href="#">图书</a>
    </li>
</ul>

###自适应导航（.nav-justified）添加该样式会让导航100%充满容器

使用

<!-- 导航选项卡-->
<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

在导航的li元素中，添加属性data-toggle=”“，如果是选项卡导航，则data-toggle=”tab”，如果是胶囊式，则data-toggle=”pill”（其实设置哪个无所谓）
herf指向的id，选项卡面板（.tab-pane）的id对应
选项卡面板（.tab-pane）要放到面板容器.tab-content中，默认是隐藏的。
按如上规则编写好html后，Bootstrap.js将自动完成初始化
可以使用$(“.nav a”).tab(‘show’)手动调用选项卡，选择器指向选项卡中带有data-toggle=”tab”的元素。

导航条

基本结构

.navbar样式的主要设置了相对定位，最小高度（50px），底边外边距（20px），圆角等
.navbar-default是对导航条主题颜色的设置，反色导航条则应用.navbar-inverse样式
.navbar-nav样式，是在原有.nav样式的基础上（nav和navbar-nav要一起使用），重新调整设置了菜单项链接的浮动和内外边距的设置
.navbar-header下的.navbar-brand样式让字体变大加粗，用来定义导航条的标题

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">导航条标题</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">active</a></li>
        <li><a href="#">Link</a></li>
        <li class="disabled"><a href="#">disabled</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

导航条中应用表单

在.navbar容器内放置form元素，然后在form元素上应用.navbar-form样式即可

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <form class="navbar-form navbar-left" role="表单">
        <div class="form-group"><input type="text" class="form-control"></div>
        <button type="submit" class="btn btn-default">按钮</button>
    </form>
</nav>

其他相关样式

文本.navbar-text 多应用于label与P元素
按钮.navbar-btn
链接.navbar-link 需要与.navbar-text一同使用
左浮动.navbar-left与.pull-*的差别在于仅限于屏幕大于768有效
右浮动.navbar-right与.pull-*的差别在于仅限于屏幕大于768有效
在应用.navbar的元素上设置.navbar-fixed-top可以在最顶部固定
在应用.navbar的元素上设置.navbar-fixed-bottom可以在最底部固定。

面包屑导航

基本结构

<ul class="breadcrumb">
    <li><a href="#">Home<a></li>
    <li><a href="#" class="action">Library<a></li>
</ul>

分页导航

<ul class="pagination">
    <li><a href="#">«</a></li> <!-- 上一页 -->
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#" class="action">5</a></li>
<li><a href="#">»</a></li> <!-- 下一页 -->
</ul>

+ 在应用.pagination的元素上添加.pagination-sm或者.pagination-lg可以改变其大小

标签高亮

<span class="label">高亮内容</span>

徽章

在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息等。Bootstrap的.badge样式提供了很好的效果，只需要在span或者label上应用该样式即可。示
例如下：

<span class="badge">42</span>

巨幕

<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>

巨幕下内容字体加大，间距变大
如果jumbotron放在container样式内，则显示圆角。

缩略图

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="图像地址" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
            </div>
        </a>
    </div>
    ...
</div>

.Thumbnail 需要结合栅格系统使用
.thumbnail下的.caption定义了附加内容的样式

警告框

基本样式

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

.alert是基类，必填，.alert-success等作为修饰类定义了警告框的主题

可关闭的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

.alert下的.close定义了关闭按钮的样式
务必给元素添加 data-dismiss=”alert”
可以不使用.close的button元素，其他样式的按钮或者链接也可以，但是必须保证 data-dismiss=”alert” 属性
设置data-target属性，可以关闭某个指定id的警告框
依赖警告框 JavaScript 插件
可以加上.fade 和 .in 类，为警告框增加淡入淡出效果

警告框下的超链接

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。

列表组

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

用 <div> 标签代替<ul> 标签且用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（父元素必须是div，不能是ul）
用 <div> 标签代替<ul> 标签且用 <button> 标签代替 <li> 标签可以组成一个全部是按钮的列表组（父元素必须是div，不能是ul）
拥有list-group-item-success、list-group-item-info、list-group-item-warning、list-group-item-danger四个主题情景样式

面板

<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        面板内容
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

四个情景主题

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

折叠

折叠即当单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。经典的场景是多个折叠区域的手风琴风格（accordion），以及单一title/content的风格

<!-- 默认显示折叠区域-->
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发按钮</button>
<div id="demo" class="collapse in" >折叠区域...</div>

<!-- 默认隐藏折叠区域-->
<button class="btn btn-danger collapsed" data-toggle="collapse" data
target="#demo">触发按钮</button>
<div id="demo" class="collapse " >折叠区域...</div>

.collapse和.in两个样式一起用的时候是块级显示状态，单独.collapse样式则是隐藏状态。
按钮或链接要有 data-toggle=”collapse” data-target=”#demo” 两个属性，demo对应折叠区域的id。

实现手风琴风格（accordion）

将折叠内容放在一个大的容器内，并在触发元素中添加data-parent属性指向这个容器
点击拥有data-parent属性的元素时，会先隐藏data-parent所指向的容器内的所有折叠内容，再显示data-target所指向的内容，实现手风琴效果

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href=
                "#collapseOne">触发元素#1</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                折叠内容...
            </div>
        </div>
    </div>
    <!-- 其他两个pannel格式和上边的一样 -->
</div>

使用panel的panel-title作为触发元素，使用panel-body的父元素作为折叠区域。
使用一个panel-group样式的元素包含多个panel，另触发元素data-parent属性指向它，的从而实现手风琴效果。
每个panel里的触发元素都要指定data-parent属性

js用法

$(".collapse").collapse();

默认参数toggle，反转显示；
参数parent selector类型指定一个parent，隐藏该元素下所有折叠元素。

滚动侦测

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示

在平时使用过程中，滚动侦测一般有两种用法，一种是像上面的那样固定一个元素的高度，进行滚动，然后对相应的菜单进行高亮显示；另外一种是对整个页面（body）进行滚动侦测。两种方式的用法一样，都需要有如下3个步骤：

设置滚动容器，即在所要侦测的元素上设置datatarget=”#selector” data-spy=”scroll”属性。
设置菜单链接容器，该容器的id（或样式）和data-target属性所对应的选择符应一致。
在菜单容器内，必须有.nav样式的元素，并且在其内部有li元素，li内包含的a元素才是可以侦测高亮的菜单链接，即符合.nav li > a这种选择符的条件。

注意：

子菜单虽然会高亮，但不会打开，为了展示效果，需要手动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起作用。
如果要高亮显示href=”#fat”所在的菜单，就必须有id=”fat”的元素，其显示范围超过当前滚动区域才行。
无论哪种方法都要求被侦测的元素position: relative;，如果不是body元素，必须确定其有固定高度且overflow-y: scroll;

第一种方法：

<html>

    <head>
    </head>

    <body>
        <div id="selector">
            <!-- 菜单容器 -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#fat">@fat</a>
                    </li>
                    <!-- 第1个链接 -->
                    <li class="">
                        <a href="#mdo">@mdo</a>
                    </li>
                    <!-- 第2个链接 -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="">
                                <a href="#one">one</a>
                            </li>
                            <!-- 第3个链接 -->
                            <li class="">
                                <a href="#two">two</a>
                            </li>
                            <!-- 第4个链接 -->
                            <li class="divider">
                            </li>
                            <li class="">
                                <a href="#three">three</a>
                            </li>
                            <!-- 第5个链接 -->
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!--—滚动侦测区域 ---->
        <div data-offset="0" data-target="#selector" data-spy="scroll" style="确保设置了固定高度，并且overflow: auto">
            <h4 id="fat">@fat</h4>
            <p>具体内容</p>
            <h4 id="mdo">@mdo</h4>
            <p>具体内容</p>
            <h4 id="one">one
            </h4>
            <p>具体内容
            </p>
            <h4 id="two">two</h4>
            <p>具体内容</p>
            <h4 id="three">three</h4>
            <p>具体内容</p>
        </div>
    </body>

</html>

第二种方法

第二种和第一种类似，只不过将滚动侦测容器挪到了body上，而nav一定要在body内部。

<body data-target="#selector" data-spy="scroll">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id=" selector ">
        ·····
    </nav>
    <h4 id="fat">@fat</h4>
    <p>具体内容</p>
    <!-- 省略其他链接 -->
</body>

JavaScript用法

用法：$('滚动侦测容器选择符').scrollspy({ target: '#菜单容器的选择符' })
示例：$('body').scrollspy({ target: '#selector' })

事件

activate.bs.scrollspy 每当一个新条目被激活后都将由滚动监听插件触发此事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

轮播

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 圆圈指示符 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- 图片容器 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        <h3>标题</h3>
        <p>描述...</p>
      </div>
    </div>
    ...
  </div>

  <!-- 控制按钮 -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

带有data-ride=”carousel”属性的容器，是轮播插件的父容器。
.carousel定义轮播插件父容器样式 .slide定义轮播是否带特效
.carousel-inner定义图片容器div，.item内的img是轮播的图片，.active表示当前显示的图片
.carousel-caption为字幕式说明样式
.carousel-indicators定义的是圆圈指示符容器，内部ol元素中的li表示具体的圆圈，其data-slide-to=”0”属性表示对应的图片索引（从0开始）
带有data-slide=”prev”属性的元素，是《上一张》按钮，data-slide=”next则是下一张

注意：

控制按钮千万不能放在carousel-inner样式div的前面定义，会被盖住。
轮播插件宽高比随图片自适应，但是图片最大宽度为屏幕100%

轮播插件容器上定义其他属性

data-interval 默认值为5000，表示轮播等待时间为5000毫秒，若为false则不会自动播放
data-pause 默认值 hover 默认鼠标悬停则暂停播放
data-wrap 是否循环播放，默认值为true

JavaScript方法

$('.carousel').carousel({
  interval: 2000
})

属性：

interval 默认值为5000，表示轮播等待时间为5000毫秒，若为false则不会自动播放
pause 默认值 hover 默认鼠标悬停则暂停播放
wrap 是否循环播放，默认值为true

其他方法：

.carousel('cycle')//循环
.carousel('pause')//停止
.carousel(number) //播放指定图片
.carousel('prev') //上一张
.carousel('next') //下一张

自动定位浮标

暂略

刘之帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之组件

JavaScript插件操作对象寻找规则先查找data-target属性再查找href属性如果都没有，则操作父元素。小图标<i class="glyphicon glyphicon-search"></i><span class="glyphicon glyphicon-search"></span>所有的icon样式都以glyphi
复制链接

扫一扫