bootstrap组件

最新推荐文章于 2021-08-08 17:51:58 发布
最新推荐文章于 2021-08-08 17:51:58 发布
阅读量380 收藏
点赞数
分类专栏： bootstrap

原有地址

快捷地址

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>

codingMonkeyKing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap中<li role="presentation">表示真实含义是什么？
哈里·雪利博客
12-10 1万+
最近在学习bootstrap3.3.5，遇到一个问题搞不清楚到底什么含义？ 网上到处查国内资料很少，没有表达最贴切含义，在GitHub 查到了相关资料结合“图灵计算机词汇” 在图灵计算机词汇里也可以查询其含义： presentation   n. 【Web】表现层；[计] 简报，列表单；【通用软件】演示（来源：图灵计算机词汇表）； n.  赠与，赠送，描述，简述，介绍，陈
HTML中的role属性
热门推荐
轻风未晓的博客
12-04 11万+
一.什么是role属性 role属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。 在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版
role=“presentation“啥意思
无形的专栏
07-03 2万+
html中role=”presentation”啥意思？一段涉及BootStrap框架的html代码中li标签有这个属性. role是标签扮演的角色属性，更多的是注明作用，对css样式没影响。可能对js事件有影响
2021-08-08 JQ
faharciki的博客
08-08 174
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作用
qq_34639706的博客
06-12 3125
看到别人代码中出现role属性，记录一下： <li role="tab" class=tabs-tab>tab1</li> role 是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。 通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button <l
bootstrap组件之导航组件使用方法
08-31
Bootstrap 中的导航组件都依赖同一个 .nav 类和ul，状态类也是共用的。改变修饰类可以改变样式。接下来通过本文给大家介绍bootstrap 导航组件使用方法，一起看看吧
phalcon-bootstrap:Phalcon 的 Bootstrap 组件
06-25
Phalcon 的 Bootstrap 组件 该组件用作的基础。 我建议使用它而不是这个引导程序。 运行应用程序 要启动应用程序，您需要执行代码： $ app = new Bootstrap ( new FactoryDefault ()); echo $ app -> run (); ...
Bootstrap组件系列之福利篇几款好用的组件(推荐)
09-02
Bootstrap是一个非常流行的前端框架，它提供了...这部分缺失的内容对于想要深入了解如何实现时间选择组件功能的开发者来说可能会感到遗憾，但文章的主题——分享Bootstrap组件系列中的优秀组件，已经得到了清晰的传达。
Bootstrap组件系列之福利篇几款好用的组件（推荐二）
09-02
Bootstrap组件系列中的福利篇，向我们推荐了几款实用的Bootstrap组件。在本文中，将详细介绍第二波推荐组件中的多值输入组件。多值输入组件是一种能够满足用户在文本框中输入多个值需求的界面组件。它可以广泛应用于...
浅析Bootstrap中Tab（标签页）的使用方法
皮蛋瘦肉没有肉
11-23 8万+
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换 如".nav-pills"（胶囊式导航）与 ".nav-tabs" （标签式导航） 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。 下面的实例演示了这点： Home Profile
辛星浅析html5中的role属性
辛星，前进的路上.
06-05 4174
我们使用role属性告诉辅助设备，这个元素所扮演的角色，比如点击的按钮，我们通常就使用role="button",会让这个元素可点击。      但是它更多的是用来增强语义性，当现有的html标签不能充分表达语义性的时候，就可以借助role来说明。通常它更多的出现在一些自定义的组件上。比如html中没有tree标签，我们就可以把他的role设置为tree，这样可以增强组件的可访问性、可用性和可交
HTML5中的aria与role
开发笔记
08-16 3万+
这些都是HTML5针对html tag增加的属性： aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如屏幕阅读器。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role="button"，辅助工具就可以认出这实际上是个button。 ar
speech, presentation, lecture有什么区别？
认知 行动 坚持
11-18 2万+
speech是演讲        presentation是展示        lecture是讲座        举一些例子：         (1)         奥巴马获胜后， 对全国人发表的演讲， 盛情并茂，  比较煽情。 这是speech.        马丁路德金， 发表了著名的演讲， 煽动性大， 影响深远， 有25万人在场， 这是speech.
做好Presentation的五个原则（转载）
Code & Technology Sharing
01-08 3632
做好Presentation的五个原则（转载） 原文地址：如何做好Presentation？（1）-五个原则 在大学四年的成长中，在课堂、作业答辩、论文答辩、社团工作等诸多方面需要我们掌握并熟练的使用一项技能，那就是Presentation！从未来职场需求的角度讲，这是一项新人、骨干、中层、高层都离不开的技能，同时也是展示个人综合素养的一个良好窗口。所以，同学们务必要高度重视大
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导航功能使用；
role属性：html中role的作用
鄙人kunzhi96，感恩遇见！
12-14 1万+
这个role属性之前也没有注意过，下面为转载了解内容 role 是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。 通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个...
Bootstrap组件
最新发布
07-29
Bootstrap是一个流行的前端框架，提供了一套丰富的组件库，可以帮助开发者快速构建响应式的网页界面。以下是一些常用的Bootstrap组件： 1. 按钮（Button）：提供了各种样式的按钮，包括基本按钮、链接按钮、下拉菜单按钮等。 2. 导航栏（Navbar）：用于创建网页的顶部导航栏，可以包含品牌logo、链接、下拉菜单等。 3. 卡片（Card）：以卡片的形式展示内容，可以包含标题、图片、文字等。 4. 表格（Table）：提供了灵活的表格样式，支持排序、筛选、分页等功能。 5. 表单（Form）：包括输入框、复选框、单选框、下拉菜单等表单元素，可以方便地收集用户输入。 6. 模态框（Modal）：用于展示弹出窗口，可以显示文本、图片、表单等内容。 7. 轮播（Carousel）：用于展示图片或内容的轮播组件，支持自动切换和手动切换。 8. 标签页（Tabs）：提供了多个标签页，每个标签页可以包含不同的内容。 9. 进度条（Progress）：用于展示进度的组件，可以显示当前进度的百分比。 10. 图标（Icon）：提供了一系列常用的图标，可以用于按钮、导航栏等。 这些只是Bootstrap组件库中的一部分，开发者可以根据项目需求选择合适的组件来构建网页界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值