bootstrap组件

痛定思痛。 2022-06-15 11:14 216阅读 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图标字体只能用于“空元素”---不包含任何内容和子元素

# 组件----按钮组 #

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

# 组件----自学     #

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

面包屑:     .breadcrumb

分页：    .pagination .page

标签：  .label

徽章：  .badge

巨幕：   .jumbotron

水井：  .well

页头：  .page-header

# 组件---导航 #

## 标签式导航 ##

## 胶囊式导航    ##

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

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">
        
          
        <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>   <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>   </div></div>