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. Java Web Application使Session永不失效(利用cookie隐藏登录)
			
    在做 Web Application 时,因为 Web Project 有 session 自动失效的问题,所以如何让用户登录一次系统就能长时间运行三个月,就是个问题. 后来,看到 session 失 ...
    
			
    2. 
						
  2. java算法面试题：设计一个快速排序。双路快速排序，简单易于理解。
			
    package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util.Compar ...
    
			
    3. 
						
  3. for循环语句中的先后执行顺序
			
    for(int i=0;i<10;i++){ cout<<i; } 分析程序运行结果:for(cout<<"a";cout<<" ...
    
			
    4. 
						
  4. 从指定的view中截图 返回UIImage
			
    -(UIImage *)getImageFromView:(UIView *)view{ UIGraphicsBeginImageContext(view.bounds.size); [view.la ...
    
			
    5. 
						
  5. 《转载》ASP动态iframe
			
    原文:[ASP.NET]关于iframe的两个技巧 最近在给朋友写个网站,虽然不大,但是也碰到了一些问题.这篇就为解决ASP.NET中关于IFRAME的两个很现实的问题提供解决方法.PS:呵呵,又做了 ...
    
			
    6. 
						
  6. 对比传统方式访问数据库和SpringData访问数据库
			
    我们在写代码的时候应该一边写一边测试,这样的话可以尽快的找到错误,在代码写多了之后去找错误的话不容易给错误定位 传统方式访问数据库 1:创建一个Maven web项目 2:修改pom.xml为以下内容 ...
    
			
    7. 
						
  7. php获取随机字符串
			
    获取随机字符串 /** * 获取随机字符串 * @param int $randLength 长度 * @param int $addtime 是否加入当前时间戳 * @param int $incl ...
    
			
    8. 
						
  8. thinkphp 5数据库操作
			
    1.原生sql $options=Db::table('__MALL_POST__') ->alias('m') ->join('__MALL_CATEGORY_VALUE__ v','m ...
    
			
    9. 
						
  9. [译]The Python Tutorial#1. Whetting Your Appetite
			
    [译]The Python Tutorial#Whetting Your Appetite 1. Whetting Your Appetite 如果你需要使用计算机做很多工作,最终会发现很多任务需要自 ...
    
			
    10. 
						
  10. 最短路径：HDU2006-一个人的旅行（多个起点，多个终点）
			
    题目: 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...
    
			
    11.