bootstrap组件

前端UI组件实例
最新推荐文章于 2021-08-08 17:51:58 发布
转载 最新推荐文章于 2021-08-08 17:51:58 发布 · 499 阅读 · 0

原有地址

快捷地址

1.下拉菜单

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
 <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="javascript:void(0)">Node.js</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">分离的链接</a>
</li>
</ul>
</div>  
</body>
</html>



2.基本的按钮组


 <div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>


  <div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">下拉链接 1</a></li>
<li><a href="javascript:void(0)">下拉链接 2</a></li>
</ul>
</div>
</div>

上拉

<button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">



3.文本输入框 


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
 <div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>  
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
  <div style="padding: 100px 100px 10px;">
<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-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div> 
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
  <div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<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="javascript:void(0)">功能</a></li>
<li><a href="javascript:void(0)">另一个功能</a></li>
<li><a href="javascript:void(0)">其他</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
<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">
 <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 pull-right">
 <li><a href="javascript:void(0)">功能</a></li>
<li><a href="javascript:void(0)">另一个功能</a></li>
<li><a href="javascript:void(0)">其他</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div> 
</body>
</html>

4.导航


  1. <ul class="nav nav-tabs">
  2. <li role="presentation" class="active"><a href="#">Home</a></li>
  3. <li role="presentation"><a href="#">Profile</a></li>
  4. <li role="presentation"><a href="#">Messages</a></li>
  5. </ul>

胶囊式标签页


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
  <div style="padding: 10px 10px 10px;">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="javascript:void(0)">Home</a></li>
<li role="presentation"><a href="javascript:void(0)">Profile</a></li>
<li role="presentation"><a href="javascript:void(0)">Messages</a></li>
</ul></div><div style="padding: 10px 10px 10px;">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="javascript:void(0)">Home</a></li>
<li role="presentation"><a href="javascript:void(0)">Profile</a></li>
<li role="presentation"><a href="javascript:void(0)">Messages</a></li>
</ul></div> 
</body>
</html>

两端对齐的标签页

  1. <ul class="nav nav-tabs nav-justified">
  2. ...
  3. </ul>
  4. <ul class="nav nav-pills nav-justified">
  5. ...
  6. </ul>

  1. <ul class="nav nav-tabs">
  2. ...
  3. <li role="presentation" class="dropdown">
  4. <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
  5. Dropdown <span class="caret"></span>
  6. </a>
  7. <ul class="dropdown-menu" role="menu">
  8. ...
  9. </ul>
  10. </li>
  11. ...
  12. </ul>

  1. <form class="navbar-form navbar-left" role="search">
  2. <div class="form-group">
  3. <input type="text" class="form-control" placeholder="Search">
  4. </div>
  5. <button type="submit" class="btn btn-default">Submit</button>
  6. </form>

  1. <ol class="breadcrumb">
  2. <li><a href="#">Home</a></li>
  3. <li><a href="#">Library</a></li>
  4. <li class="active">Data</li>
  5. </ol>

5.默认分页



  1. <nav>
  2. <ul class="pagination">
  3. <li>
  4. <a href="#" aria-label="Previous">
  5. <span aria-hidden="true">«</span>
  6. </a>
  7. </li>
  8. <li><a href="#">1</a></li>
  9. <li><a href="#">2</a></li>
  10. <li><a href="#">3</a></li>
  11. <li><a href="#">4</a></li>
  12. <li><a href="#">5</a></li>
  13. <li>
  14. <a href="#" aria-label="Next">
  15. <span aria-hidden="true">»</span>
  16. </a>
  17. </li>
  18. </ul>
  19. </nav>
  1. <nav>
  2. <ul class="pager">
  3. <li><a href="#">Previous</a></li>
  4. <li><a href="#">Next</a></li>
  5. </ul>
  6. </nav>

6。徽章



  1. <a href="#">Inbox <span class="badge">42</span></a>
  2. <button class="btn btn-primary" type="button">
  3. Messages <span class="badge">4</span>
  4. </button>
  1. <div class="alert alert-warning alert-dismissible" role="alert">
  2. <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  3. <strong>Warning!</strong> Better check yourself, you're not looking too good.
  4. </div>

7.带有提示标签的进度条



  1. <div class="progress">
  2. <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  3. 60%
  4. </div>
  5. </div>


  1. </ul>
8.列表


  1. <ul class="list-group">
  2. <li class="list-group-item">
  3. <span class="badge">14</span>
  4. Cras justo odio
  5. </li>

phalcon-bootstrap:Phalcon 的 Bootstrap 组件
06-25
Phalcon 的 Bootstrap 组件 该组件用作的基础。 我建议使用它而不是这个引导程序。 运行应用程序 要启动应用程序，您需要执行代码： $ app = new Bootstrap ( new FactoryDefault ()); echo $ app -> run (); ...
role=“presentation“啥意思
无形的专栏
07-03 2万+
html中role=”presentation”啥意思？一段涉及BootStrap框架的html代码中li标签有这个属性. role是标签扮演的角色属性，更多的是注明作用，对css样式没影响。可能对js事件有影响
bootstrap中<li role="presentation">表示真实含义是什么？
哈里·雪利博客
12-10 1万+
最近在学习bootstrap3.3.5，遇到一个问题搞不清楚到底什么含义？ 网上到处查国内资料很少，没有表达最贴切含义，在GitHub 查到了相关资料结合“图灵计算机词汇” 在图灵计算机词汇里也可以查询其含义： presentation   n. 【Web】表现层；[计] 简报，列表单；【通用软件】演示（来源：图灵计算机词汇表）； n.  赠与，赠送，描述，简述，介绍，陈
2021-08-08 JQ
faharciki的博客
08-08 240
JQuery1、JQ的下载-->引入-->使用2、对象3、Jquery选择器基础选择器层次选择器表单选择器jq操作属性操作元素样式操作元素内容创建、添加、删除与遍历元素加载事件与事件绑定Jquery Ajax 1、JQ的下载–>引入–>使用 1）去其官网（http://jquery.com/）下载想要使用的版本 2）在html文件中添加script标签对引入jq 3) 在html中使用 2、对象 Jquery核⼼： $ 符号在 jQuery 中代表对 jQuery 对象的引⽤，
HTML中的role属性
热门推荐
轻风未晓的博客
12-04 11万+
一.什么是role属性 role属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。 在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版
HTML标签的role作用
qq_34639706的博客
06-12 3439
看到别人代码中出现role属性，记录一下： <li role="tab" class=tabs-tab>tab1</li> role 是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。 通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button <l
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
01-21
本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。分享给大家供大家参考，具体如下： 下拉菜单 菜单： ,dropdown（.dropup改变这个是上显示） data-toggle=”dropdown” (激活文本处) .dropdown-...
dash-bootstrap-components：Plotly Dash的Bootstrap组件
01-30
Plotly Dash的Bootstrap组件·· dash-bootstrap-components是用于的组件库，可以更轻松地构建具有复杂，响应式布局的一致样式的Dash应用程序。 目录 安装 聚酰亚胺 您可以使用pip安装dash-bootstrap-components ...
使用 Vue.js 构建的 Bootstrap 组件.zip
12-01
使用 Vue.js 构建的 Bootstrap 组件已弃用抱歉，该项目不再维护。有两种很好的替代方案bootstrap-vueBootstrapVue 为 Vue.js 提供了 Bootstrap 4 组件和网格系统最全面的实现之一，并具有广泛且自动化的 WAI-ARIA 可...
bootstrap中，role作用角色
d295968572的博客
02-23 1万+
1、role是HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。简单的说，role是为了给一些特定的浏览工具，比如盲文浏览工具识别的 2、下面有其他案例： Eg1: ，把div元素转换为button按钮功能使用； Eg2:，把div元素转换为navigation导航功能使用； Eg3:，把div元素转换为checkbox复选框功能使用
bootstrap中，role="form"及role作用角色
哈里·雪利博客
12-06 1万+
1、在英汉计算机大词典里： role   n.角色(任务)； 2、在Bootstrap框架中，role="form"； form表单属性，类似与辅助工具，转换角色使用； role="form"定义form表单元素为form功能角色使用； 3、下面有其他案例： Eg1: ，把div元素转换为button按钮功能使用； Eg2:，把div元素转换为navigation导航功能使用；
speech, presentation, lecture有什么区别？
认知 行动 坚持
11-18 2万+
speech是演讲        presentation是展示        lecture是讲座        举一些例子：         (1)         奥巴马获胜后， 对全国人发表的演讲， 盛情并茂，  比较煽情。 这是speech.        马丁路德金， 发表了著名的演讲， 煽动性大， 影响深远， 有25万人在场， 这是speech.
浅析Bootstrap中Tab（标签页）的使用方法
皮蛋瘦肉没有肉
11-23 8万+
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换 如".nav-pills"（胶囊式导航）与 ".nav-tabs" （标签式导航） 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。 下面的实例演示了这点： Home Profile
HTML5中的aria与role
开发笔记
08-16 3万+
这些都是HTML5针对html tag增加的属性： aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如屏幕阅读器。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role="button"，辅助工具就可以认出这实际上是个button。 ar
做好Presentation的五个原则（转载）
Code & Technology Sharing
01-08 3857
做好Presentation的五个原则（转载） 原文地址：如何做好Presentation？（1）-五个原则 在大学四年的成长中，在课堂、作业答辩、论文答辩、社团工作等诸多方面需要我们掌握并熟练的使用一项技能，那就是Presentation！从未来职场需求的角度讲，这是一项新人、骨干、中层、高层都离不开的技能，同时也是展示个人综合素养的一个良好窗口。所以，同学们务必要高度重视大
role属性：html中role的作用
鄙人kunzhi96，感恩遇见！
12-14 1万+
这个role属性之前也没有注意过，下面为转载了解内容 role 是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。 通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个...
bootstrap组件库
最新发布
06-06
### Bootstrap 组件库与 UI 工具 Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式支持。为了进一步增强开发体验，许多开发者创建了基于 Bootstrap 的组件库和 UI 工具。以下是一些常用的 Bootstrap 相关资源： #### 1. Pixel UI Kit Pixel UI Kit 是一个免费且开源的 Bootstrap 5 UI 工具包[^1]。它不依赖 jQuery，适合现代 Web 开发需求。该工具包包含了许多预设计的组件、页面模板和图标，能够帮助开发者快速构建美观的用户界面。 #### 2. Bootswatch Bootswatch 提供了大量免费的 Bootstrap 主题[^2]。这些主题可以直接应用于 Bootstrap 项目中，无需额外修改代码即可改变网站的整体风格。Bootswatch 支持多个版本的 Bootstrap，确保兼容性。 #### 3. StyleBootstrap.info StyleBootstrap.info 是一个配色工具，允许开发者为每个 Bootstrap 组件应用不同的颜色方案[^2]。通过该工具，可以轻松定制按钮、卡片、导航栏等元素的颜色，满足个性化设计需求。 #### 4. Fuel UX Fuel UX 是一个扩展 Bootstrap 功能的 JavaScript 控件集合[^2]。它提供了诸如树形结构、复选框组、拖放排序等功能，这些控件经过优化，易于安装和使用。 #### 5. LayoutIt LayoutIt 是一个基于 Bootstrap 的可视化布局生成器。开发者可以通过拖放操作将组件添加到页面中，并实时调整其属性。这使得原型设计和前端开发变得更加高效。 #### 6. Bootsnap Bootsnap 是一个在线前端框架交互组件制作工具[^2]。它提供了大量的 Bootstrap 示例代码，开发者可以直接复制并集成到自己的项目中。此外，Bootsnap 还允许用户上传自定义 HTML/CSS/JavaScript 文件以进行测试。 #### 7. Axure 组件库 虽然 Axure 是一个独立的原型设计工具，但也有专门针对 Bootstrap 的组件库可用[^3]。例如，Material Axure Library 提供了一套基于 Material Design 的 Axure 组件，可以方便地用于创建符合 Bootstrap 规范的原型。 ```html <!-- 示例：使用 Bootswatch 主题 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://bootswatch.com/5/cosmo/bootstrap.min.css" rel="stylesheet"> <title>Bootswatch Example</title> </head> <body> <div class="container"> <h1 class="text-center">Hello, World!</h1> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值