bootstrap组件

最新推荐文章于 2023-10-21 22:20:46 发布

ruthy-wei

最新推荐文章于 2023-10-21 22:20:46 发布

阅读量567

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/ruthywei/article/details/72831354

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件----图标字样

Glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标

bootstrap中可以免费使用这套字体中对的250+个。

以服务器端字体形式出现的，即客户端若访问了使用Glyphicons字体的网站

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

注意：1》图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同的字体

2》glyphicon图标字体只能用于“空元素”---不包含任何内容和子元素

<span class="glyphicon glyphicon-dashboard"></span>

组件----按钮组

.btn-group 水平按钮组

.btn-group-vertical 竖直按钮组

.btn-group .btn-group-justified 水平两端对齐的按钮组

.btn-group-lg

.btn-group-md

.btn-group-sm

.btn-group-xs

组件-----下拉菜单

下拉菜单必须HTML结构：

<div class="dropdown">相对定位的父元素

</div>

<div class="dropdown">
    <a data-toggle="dropdown" class="btn btn-success" href="#">产品大全 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown-header bg-info">家电</li>
      <li class="divider"></li>
      <li><a href="#">洗衣机</a></li>
      <li><a href="#">电视</a></li>
      <li><a href="#">冰箱</a></li>
      <li><a href="#">沙发</a></li>
      <li class="divider"></li>
      <li class="dropdown-header bg-info">水果</li>
      <li class="divider"></li>
      <li><a href="#">苹果</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">橘子</a></li>
    </ul>
  </div>
</div>

组件----自学

路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

面包屑: .breadcrumb

分页： .pagination .page

标签： .label

徽章： .badge

巨幕： .jumbotron

水井： .well

页头： .page-header

组件---导航

标签式导航

<h5>标签-导航</h5>
  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#">水果</a></li>
    <li class="active"><a data-toggle="tab" href="#">家电</a></li>
    <li><a data-toggle="tab" href="#">服装</a></li>
    <li><a data-toggle="tab" href="#">书籍</a></li>
  </ul>

胶囊式导航

<ul class="nav nav-pills">
    <li><a data-toggle="tab" href="#">水果</a></li>
    <li class="active"><a data-toggle="tab" href="#">家电</a></li>
    <li><a data-toggle="tab" href="#">服装</a></li>
    <li><a data-toggle="tab" href="#">书籍</a></li>
  </ul>

此外，还有两张导航变种：

1》两端对齐的导航 .nav .nav-tabs .nav-justified

2》竖直放置的胶囊导航 .nav .nav-pills .nav-stacked

组件---响应式导航

响应式导航条：在PC和平板中默认要显示的内容；但在手机中导航条默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”,

只有单击折叠按钮后才显示所有的菜单项。

bootstrap中导航条按位置：

1>顶部导航条

2>底部导航条

bootstrap中导航条按颜色：

1>浅色底深色的字 .navbar-default

2>深色底浅色的字 .navbar-inverse

bootstrap中导航条按定位：

1>相对定位 position：relative

2>固定定位 position：fixed

------------------------------------------------------------------------------------

<div class="navbar 颜色 定位">
  <div class="container">
    <!--导航条 begin-->
      <!--导航条头部begin-->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="img/logo.png" alt="" style="margin-top:-5px; ">
      </a>
  <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>//sr-only只有屏幕阅读器可以看见

  <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!--导航条头部end--> <!--导航条折叠菜单begin--> <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav
 navbar-nav"> <li class="active"><a href="#">new</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown

<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li>
 <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search">
 </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <!--导航条折叠菜单end--> <!--导航条end--> </div></div>