bootstrap中，常见的组件有很多，比如按钮，输入框，导航条，巨幕，面板等。这次根据对bootstrap的一系列学习进行总结。

按钮：button

<button type="button" class="btn btn-default">button</button> 在这里面还可以加上字体图标等。

在button中引入action，或者jsp,html的方法：

<button type="button" class="btn" onclick="window.location.href='SystemAdmin_login.html'">登陆</button>

<button type="button" class="btn" onclick="window.location.href='register.html'">注册</button>

输入框：input

<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

下拉菜单：dropdown

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单按钮 <span class="caret"></span></a>
   <ul class="dropdown-menu">
　　<li><a href="#">1</a></li>
　　<li><a href="#">2</a></li>
　　<li><a href="#">3</a></li>
　　<li role="separator" class="divider"></li><!--一条分割线-->
　　<li><a href="#">4</a></li>
　　<li role="separator" class="divider"></li>
　　<li><a href="#">5</a></li>
    </ul>
</li>

这里所提到的单按钮下拉菜单和分裂式按钮下拉菜单类型差不多。

导航：nav

<p>标签式的导航菜单</p>

<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>                            <链接查看> http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

面包屑导航：class="breadcrumb",这种类型的导航常见于类似于淘宝天猫的所在阶段，

就是这种。

轮播：

<div class="item">

  <img src="..." alt="...">

  <div class="carousel-caption">

    <h3>...</h3>

    <p>...</p>

  </div>

</div>

对于上面所提到的一系列组件，下面来用一个实例进行总结：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="utf-8" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

     <meta name="viewport" content="width=device-width, initial-scale=1" />

     <title>Bootstrap</title>

      <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 </head>

 <body>

    <nav class="navbar navbar-default navbar-static-top">

    <div class="container">

     <div class="container-fluid">

     <!-- Brand and toggle get grouped for better mobile display -->

     <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">Toggle navigation</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

       </button>

       <a class="navbar-brand" href="https://www.baidu.com/">百度一下</a>

     </div>

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

       <ul class="nav navbar-nav">

         <li class="active"><a href="http://www.cnblogs.com/zxcjj/">Jaxzm<span class="sr-only"></span></a></li>

         <li><a href="http://blog.sina.com.cn/zjjxuchao199">思无邪</a></li>

         <li class="dropdown">

           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单按钮 <span class="caret"></span></a>

           <ul class="dropdown-menu">

             <li><a href="#">1</a></li>

             <li><a href="#">2</a></li>

             <li><a href="#">3</a></li>

             <li role="separator" class="divider"></li><!--一条分割线-->

             <li><a href="#">4</a></li>

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

             <li><a href="#">5</a></li>

           </ul>

         </li>

       </ul>

       <form class="navbar-form navbar-left " role="search">

         <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="#">Joy</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="#">1</a></li>

             <li><a href="#">2</a></li>

             <li><a href="#">3</a></li>

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

             <li><a href="#">4</a></li>

           </ul>

         </li>

       </ul>

     </div><!-- /.navbar-collapse -->

   </div>

   </div><!-- /.container-fluid -->

 </nav>

  <div class="container" style="width:900px;height:500px;">

   <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">

       <ol class="carousel-indicators">

         <li data-target="#carousel-example-captions" data-slide-to="0" class=""></li>

         <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>

         <li data-target="#carousel-example-captions" data-slide-to="2" class="active"></li>

       </ol>

       <div class="carousel-inner" role="listbox">

        <div class="item">

           <img src="F:\图片\boootstrap\4.png" alt="...">

           <div class="carousel-caption">

             <h3>Roses</h3>

             <p></p>

           </div>

         </div>

         <div class="item">

           <img src="F:\图片\boootstrap\5.png" alt="...">

           <div class="carousel-caption">

             <h3>Girl</h3>

             <p></p>

           </div>

         </div>

         <div class="item active">

           <img src="F:\图片\boootstrap\6.png" alt="...">

           <div class="carousel-caption">

             <h3>Myself</h3>

             <p></p>

           </div>

         </div>

       </div>

       <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">

         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

         <span class="sr-only">Previous</span>

       </a>

       <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">

         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

         <span class="sr-only">Next</span>

       </a>

     </div>

   </div>  

 </body>

 </html>

它的效果如图所示：

后期将会对bootstrap进行更加深刻的学习。包含bootstrap的一系列插件等。

												


											
bootstrap之常见组件应用1的更多相关文章
	

    
								
  1. 利用bootstrap的modal组件自定义alert，confirm和modal对话框
		
    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
    
		
    2. 
						
  2. bootstrap轮播组件,大屏幕图片居中效果
		
    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
    
		
    3. 
						
  3. bootstrap 之 列表组件使用
		
    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...
    
		
    4. 
						
  4. bootstrap轮播组件之“如何关闭自动轮播”
		
    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
    
		
    5. 
						
  5. C后端设计开发 - 第6章-武技-常见组件上三路
		
    正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.
    
		
    6. 
						
  6. bootstrap课程5 bootstrap中的组件使用的注意事项是什么
		
    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
    
		
    7. 
						
  7. 微信小程序(五)-常见组件(标签)
		
    常见组件(标签) https://developers.weixin.qq.com/miniprogram/dev/component/ 1.view 代替以前的div标签 2.text 1.文本标签 ...
    
		
    8. 
						
  8. 微信小程序学习笔记五 常见组件
		
    1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-cl ...
    
		
    9. 
						
  9. Bootstrap Blazor Table 组件（二）
		
    原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SOA架构设计案例分析
			
    转载自:https://www.jdon.com/soa.html 首先Martin Fowler提出SOA歧义Service Oriented Ambiguity,认为"什么是SOA&qu ...
    
			
    2. 
						
  2. c++ 循环程序的作业，2017年10月10日作业题。
			
    作业1: 需求:输出一个由 * 符号所组成的矩形,要求每行有50个 * ,一共需要有60行.使用双重for循环完成. 作业2: 需求:输出一个由 * 符号所组成的三角形,要求第一行一个 * ,第二行  ...
    
			
    3. 
						
  3. 记录JQ-WEUI中滚动加载的一个BUG
			
    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
    
			
    4. 
						
  4. pycharm在同目录下import，pycharm会提示错误，但是可以运行
			
    原因是:    pycharm不会将当前文件目录自动加入自己的sourse_path. 解决方案:右键make_directory as-->sources path将当前工作的文件夹加入sou ...
    
			
    5. 
						
  5. pytthon + Selenium+chrome linux 部署
			
    1,centos7 安装 google-chrome (1) 添加chrome的repo源 vi /etc/yum.repos.d/google.repo [google] name=Google-x ...
    
			
    6. 
						
  6. nginx反向代理后端web服务器记录客户端ip地址
			
    nginx在做反向代理的时候,后端的nginx web服务器log中记录的地址都是反向代理服务器的地址,无法查看客户端访问的真实ip. 在反向代理服务器的nginx.conf配置文件中进行配置. lo ...
    
			
    7. 
						
  7. java util - 在java代码中执行javascript代码工具 rhino-1.7.7.jar
			
    需要 rhino-1.7.7.jar 包 代码示例: package cn.java.mozilla.javascript; import org.mozilla.javascript.Context ...
    
			
    8. 
						
  8. A1083 List Grades (25)（25 分）
			
    A1083 List Grades (25)(25 分) Given a list of N student records with name, ID and grade. You are supp ...
    
			
    9. 
						
  9. windows下pip安装python模块时报错【转】
			
    windows下pip安装python模块时报错总结 请给作者点赞--> 原文链接 1 权限问题 C:\Users\ljf>pip install xlwt Exception: Trac ...
    
			
    10. 
						
  10. wget常用下载命令
			
    wget wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理.wget名称的由来是“World Wide Web ...
    
			
    11.