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. 什么是SAD，SAE，SATD，SSD，SSE，MAD，MAE，MSD，MSE？
			
    SAD(Sum of Absolute Difference)=SAE(Sum of Absolute Error)即绝对误差和 SATD(Sum of Absolute Transformed Di ...
    
			
    2. 
						
  2. 谷歌SwitchySharp && SwitchyOmega插件
			
    http://pan.baidu.com/s/1jOwgu 谷歌SwitchySharp插件 http://pan.baidu.com/s/1mgl7e2k SwitchySharp的升级版Switc ...
    
			
    3. 
						
  3. OI，我的决心
			
    虽然从初一就开始NOIP,但沉溺于游戏编程等各种乱七八糟的技术,一直没对算法有过透彻的研究. ——————————简单的来说就是水过了—————————— 我生于一个弱省,就读于一所弱校(我们全区的都 ...
    
			
    4. 
						
  4. 洛谷P1048采药
			
    这道题一看就知道是01背包,我门用f[i]来表示时间剩余i时的最大的价值 一共只有两种选择取或者不取,可以得到方程式f[i]=max(f[i],f[i-a[i]]+v[i])(a[i]是表示时间,v[ ...
    
			
    5. 
						
  5. Apache 错误日志
			
    配置文件中:httpd.conf ErrorLog "/usr/local/var/log/apache2/error_log1" CustomLog "/usr/loc ...
    
			
    6. 
						
  6. python用requests请求，报SSL:CERTIFICATE_VERIFY_FAILED错误。
			
    response = requests.request("GET", url, headers=headers, params=querystring, verify=False) ...
    
			
    7. 
						
  7. pytthon + Selenium+chrome linux 部署
			
    1,centos7 安装 google-chrome (1) 添加chrome的repo源 vi /etc/yum.repos.d/google.repo [google] name=Google-x ...
    
			
    8. 
						
  8. nginx修改nginx.conf配置可以https访问
			
    修改nginx.conf,参照如下更改配置server { listen 443; server_name abc.com; // 访问域名 ssl on; root /var/www/bjubi.c ...
    
			
    9. 
						
  9. Dire Wolf HDU - 5115（区间dp）
			
    Dire Wolf Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others)Total ...
    
			
    10. 
						
  10. 笔记-数据库-redis
			
    笔记-数据库-redis 1.      redis简介 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 stri ...
    
			
    11.