组件

图标使用

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

图标的 类名 可以到 https://v3.bootcss.com/components/ 查找

下拉框

向下的下拉框

<!-- 下拉框 -->
<div class="dropdown">
  <button class="btn btn-default" id="dropdownMenu1" data-toggle="dropdown">
	Dropdown
	<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
	<li><a href="#">Action</a></li>
	<li class="disabled"><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>
  </ul>
</div>

向上的下拉框

<!-- 朝上的下拉框 -->
<div class="dropup">
  <button class="btn btn-default" data-toggle="dropdown" >
	Dropup
	<span class="caret"></span>
  </button>
  <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>
  </ul>
</div>

data-toggle="dropdown" dropdown-menu 这两个值是固定的

id="dropdownMenu2"

aria-labelledby="dropdownMenu2" 这两个值，可以没有

分裂式下拉菜单

<div class="btn-group dropdown">
	<button type="button" class="btn btn-danger">Action</button>
	<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="caret"></span>
	</button>
	<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  class="divider"></li>
	<li><a href="#">Separated link</a></li>
	</ul>
</div>

可以点击的部分只有尾部一个小按钮

下拉框中的特殊项

标题

<li class="dropdown-header">标题</li>

分割线

<li class="divider"></li>

禁用菜单

<li class="disabled"></li>

按钮组

基本按钮组

  • .btn-group 包裹一组按钮
<div class="btn-group"  aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
</div>

按钮工具栏

  • .btn-toolbar 包裹多个按钮组

    <div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

按钮组的尺寸

  • .btn-group-lg 大尺寸
  • .btn-group-sm 小尺寸
  • .btn-group-xs 超小尺寸

嵌套下拉菜单

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

按钮组垂直排列

  • .btn-group-vertical 组标签替换成这个类

按钮组两端对齐

  • .btn-group 、.btn-group-justified 组标签添加这两个类

输入框组

在输入框两侧添加额外的元素

  • .input-group-addon 在输入框前面或后面添加的内容

  • .input-group-btn 在输入框两侧添加按钮

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

在输入框两侧添加单选框或多选框

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

在输入框两侧添加按钮

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

在输入框两侧添加下拉框

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <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 class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <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>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

导航

标签页

  • .nav 、.nav-tabs 两个类设置导航栏

    <ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li ><a href="#">Profile</a></li>
  <li ><a href="#">Messages</a></li>
</ul>

胶囊式标签页

  • .nav .nav-pills 两个类设置

    <ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

垂直式方向标签页

  • .nav .nav-pills .nav-stacked 第三个类设置垂直

两端对齐

  • .nav .nav-tabs .nav-justified 第三个类设置两端对齐

禁用某个标签

  • .disabled

标签页添加下拉按钮

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" >
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

导航条

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<!-- 屏幕过小时候的收缩栏 -->
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
			 aria-expanded="false">
				<span class="sr-only">收缩按钮</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<!-- 主题标签 -->
			<a class="navbar-brand" href="#">题目</a>
		</div>

		<!-- 导航栏内容 -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<!-- 靠左边内容 -->
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
				<li><a href="#">Link</a></li>
			</ul>
			<form class="navbar-form navbar-left">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>
			<!-- 靠右边内容 -->
			<ul class="nav navbar-nav navbar-right">
				<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>
					</ul>
				</li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

导航条样式

  • .navbar-btn 导航条中按钮样样式
  • .navbar-text 导航条中的文本样式
  • .navbar-link 导航栏中链接样式
  • .navbar-left 导航条内容左对齐
  • .navbar-right 导航条内容右对齐
  • .navbar-fixed-top 导航条固定在顶部
  • .navbar-fixed-bottom 导航条固定在底部
  • .navbar-static-top 导航条静止在顶部，会随页面被覆盖
  • .navbar-inverse 反色导航栏

路径导航

  • .breadcrumb
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

激活某页

  • .active

禁用某页

  • .disabled

设置分页的尺寸

在ul上设置

  • .pagination-lg 大尺寸
  • .pagination-sm 小尺寸

翻页

<nav >
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

默认居中

设置两端对齐

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

禁用状态

  • .disabled 在li上使用

标签

  • .label .label-default 灰色标签
  • .label .label-primary 蓝色标签
  • .label .label-success 绿色标签
  • .label .label-info 青色标签
  • .label .label-warning 橘黄色标签
  • .label .label-danger 红色标签

显示的是有颜色的短标签

徽章

  • .badge

展示一些未读信息

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

巨幕

<div class="container">
	<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>
</div>

缩略图

  • .thumbnail a标签类，内置图片
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

自定义内容

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

警告框

四种颜色的警告框

  • .alert .alert-success 绿
  • .alert .alert-info 蓝
  • .alert .alert-warning 橘黄
  • .alert .alert-danger 红

不可关闭的警告框

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

可以被主动关闭的警告框

<div class="alert alert-warning alert-dismissible" >
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> 
</div>

警告框中可以添加链接，

  • .alert-link 设置链接和警告框一致

进度条

  • .progress 外部标签
  • .progress-bar 通过百分比宽度设置进度条进度

默认：

<div class="progress">
  <div class="progress-bar"style="width: 60%;">
    60%
    </div>
</div>

设置最小展示产长度

style="min-width: 2em;"

进度条颜色

内层标签属性

  • .progress-bar-success 绿
  • .progress-bar-info 蓝
  • .progress-bar-warning 橘黄
  • .progress-bar-danger 红

设置进度条条纹

  • progress-bar-striped
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped"  style="width: 80%">
  </div>
</div>

设置进度条动画

  • .progress-bar .progress-bar-striped .active
<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 45%">
  </div>
</div>

堆叠效果

把多个进度条放到同一个容器中

媒体对象

内容列表

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

列表组

一种组织形式

  • .list-group 列表组类

  • .list-group-item 列表组内的列表项

  • .active 选中的列表项会变成蓝色

  • .disabled 显示被禁用的列表项

列表项颜色

  • .list-group-success 绿色
  • .list-group-item-info 蓝色
  • .list-group-item-warning 橘黄
  • .list-group-item-danger 红色

面板

  • .panel 面板总标签
  • .panel-heading 面板头部标签
  • .panel-body 面板内容部分
  • .panel-footer 面板注脚部分
  • ``

头部标签加内容

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

内容加注脚

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">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>
posted @ 2021-04-28 10:47  华青少年  阅读(88)  评论(0)    收藏  举报