04 Bootstrap控件

分类：Bootstrap作者：编程之家用户

字体图标列表

在这里插入图片描述

使用注意

  1. 包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用
  2. 务必在图标和文本之间添加一个空格。
  3. 不要和其他组件混合使用
    图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。
  4. 只对内容为空的元素起作用
    图标类只能应用在不包含任何文本内容或子元素的元素上。
  5. Bootstrap 假定所有的图标字体文件全部位于 …/fonts/ 目录内

使用

<button type="button" class="btn btn-default">
	<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
	<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
	<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
	<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
	<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
	<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
	<span class="glyphicon glyphicon-user"></span> User
</button>

在这里插入图片描述

注意

在这里插入图片描述

设置背景颜色颜色

<button type="button" class="btn **btn-primary** btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在这里插入图片描述

设置大小

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在这里插入图片描述

设置字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在这里插入图片描述

阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在这里插入图片描述

下拉菜单

  1. button上：data-toggle=“dropdown”
  2. ul上： class=“dropdown-menu”
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
		主题
		<span class="caret"></span><!--箭头 -->
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
	</ul>
</div>

在这里插入图片描述


3. ur上取: .pull-right

在这里插入图片描述


4. li: dropdown-header 向下拉菜单的标签区域添加标题
li: class=“divider” 分割线

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"  data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" **class="dropdown-header"**>下拉菜单标题</li>
		<li role="presentation" >
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation" class="divider"></li><!-- 分割线 -->
		<li role="presentation" **class="dropdown-header"**>下拉菜单标题</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

在这里插入图片描述


5. 向上弹框：.dropup

  <div **class="dropup"**>
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
    </ul>
  </div>
  1. 禁用某一项：li上取class=“disabled”

输入框组

说明：输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

[外链图片转存失败(img-3jJwcodM-1566023346357)(D:\上课资料\备课\bootstrap\输入框组.png)]

步骤

  1. 把前缀或后缀元素放在一个带有 class .input-group 的 中。
  2. 接着，在相同的 内，在 class 为 .input-group-addon 的 内放置额外的内容。
  3. 把该 放置在 元素的前面或者后面。

注意

为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。

也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

单选复选框

[外链图片转存失败(img-XlqBo9Ms-1566023346360)(D:\上课资料\备课\bootstrap\输入框组-单选复选框.png)]

按钮

<form class="bs-example bs-example-form" role="form">
    <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">
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 --><br>
        <div class="col-lg-6">
            <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><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
</form>

[外链图片转存失败(img-aqt6GrFe-1566023346364)(D:\上课资料\备课\bootstrap\输入框组-按钮.png)]

下拉按钮

[外链图片转存失败(img-K4cFVNTE-1566023346365)(D:\上课资料\备课\bootstrap\输入框组-下拉按钮.png)]

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control">
</div><!-- /input-group -->

导航栏

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

[外链图片转存失败(img-i7JkyQWs-1566023346367)(D:\上课资料\备课\bootstrap\导航栏.png)]

步骤

  1. 以一个带有 class .nav 的无序列表开始。
  2. 添加 class .nav-tabs。

不同样式

样式 使用 效果
nav-tabs
    		[外链图片转存失败(img-4bWWQ6vz-1566023346369)(D:\上课资料\备课\bootstrap\普通的导航栏.png)]
    nav-pills
      		[外链图片转存失败(img-NP31v8ur-1566023346370)(D:\上课资料\备课\bootstrap\横向胶囊式导航栏.png)]
      nav-pills nav-stacked
        		[外链图片转存失败(img-eK9Q75BP-1566023346372)(D:\上课资料\备课\bootstrap\垂直胶囊式导航栏.png)]

        菜单项为下拉

        <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</li>

        [外链图片转存失败(img-rNOxSY91-1566023346375)(D:\上课资料\备课\bootstrap\带有下拉菜单的导航栏.png)]

        动态的内容

        <div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>
</div>

        原文地址：https://blog.csdn.net/beixiaohaizi/article/details/99692649

        版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

        相关推荐

        Bootstrap 按钮总结
        前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
        Python学习-day52-bootstrap
        起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
        bootstrap 模态框
        （1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
        BootStrap图片样式
        图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
        bootstrap日期选择
        <inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
        bootstrap-treeview 使用小记
        目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
        bootstrap 在django中的使用
          一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网，想要快速地将Bootstrap应用到你的项目中，有以下两种办法： 1、bootstrap可以在线引用，方法如下：A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。<!
        第87节：Java中的Bootstrap基础与SQL入门
        第87节：Java中的Bootstrap基础与SQL入门前言复习什么是JQ？:writelessdomore写更少的代码，做更多的事找出所有兄弟：$("div").siblings()基本过滤器：选择器：过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
        bootstrap表单
        1.bootstrap表单（1）form声明一个表单域（2）form-inline内联表单域（3）form-horizontal水平排列表单域（4）form-group表单组、包括表单文字和表单控件（5）form-control文本输入框、下拉列表控件样式（6）checkboxcheck-inline多选框样式（7）radioradio-inline单选框样式（8）input-group表单控件组
        bootstrap-validator基本使用
        <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
        算是立flag吧~~~看明天结果了~~~
        嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java，bootstrap，oracle，springboot，jquery，mybatis。 开始，我也挺心虚的，但是后来一看，，，其实本没有必要这么虚。。。毕竟。。。这些东西，写的有问题。。。问题在于没有逻辑。 bootstrap，j
        BootStrap表格
        表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
        Bootstrap-查询按钮和重置按钮
        1、问题背景   一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
        Bootstrap学习第一天笔记
        Bootstrap简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootStrap！这是一个词，不是
        bootstrap 菜单
        1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标，font文件夹需要和css文件夹在同一目录3.bootst导航条（1）navbar声明导航条（2）navbar-default声明默认的导航条样式（3）navbar-inverse声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n
        bootstrap布局实例
        1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
        BootStrap中引用glyphicon图标无法显示【已解决】
        问题描述：最近在学习BootStrap，过程中遇到引用glyphicon图标无法显示的问题，经过在百度后该问题已解决。1、首先看一下图标显示失败的页面：2、经过参考大佬们的经验，我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的，没有把所有
        BootStrap系列：BootStrap布局
        BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的
        bootstrap-multiselect组件的使用
        1引入所需要的文件2用法
        bootstrap之table列内容超出部分省略号
        想让bootstrap的table列内容超出部分省略号，要在table上加table-layout:fixed和word-break:break-all，然后在头部thead的th加上宽度百分比，最后在列里加个标签如span，在这个span加上单行超出部分省略号的css：display:inline-block，overflow:hidden，white-space:nowrap，text-overflow:e
        pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot