bootstrap之常见组件应用1

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

下拉菜单：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的更多相关文章

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

随机推荐

Java实现随机出题，10道10以内加减法计算
package com.swift; import java.awt.Toolkit; import java.util.Scanner; public class PlusQuiz { public ...
DevOps - 版本控制 - Gogs
Gogs Gogs官网:https://gogs.io Gogs文档:https://gogs.io/docs Gogs配置文件手册:https://gogs.io/docs/advanced/con ...
JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
Python3爬取人人网（校内网）个人照片及朋友照片，并一键下载到本地~~~附源代码
题记: 11月14日早晨8点,人人网发布公告,宣布人人公司将人人网社交平台业务相关资产以2000万美元的现金加4000万美元的股票对价出售予北京多牛传媒,自此,人人公司将专注于境内的二手车业务和在美国 ...
[Hdu1693]Eat the Trees（插头DP）
Description 题意:在n*m(1<=N, M<=11 )的矩阵中,有些格子有树,没有树的格子不能到达,找一条或多条回路,吃完所有的树,求有多少种方法. Solution 插头DP ...
【Python】函数参数类型及用法
一.函数的参数类型 def hs(a1,a2,a3,...): ****statements 其中a1,a2,a3是函数的参数,函数的参数类型可分为:必须参数.默认参数.可变参数(不定长参数).关键 ...
数据结构之B-树
作为文件系统索引的常用数据结构,B-树的查找涉及硬盘和内存两个部分,硬盘的读写将影响查找的速度.传统关系型数据库如Mysql采用B-树作为索引,新型内存数据库levledb通过改进数据组织方式通过内存 ...
Day24&25&26&27：HTML+CSS
1.网页得三大组成:HTML(标签.皮影的小人) \CSS(布局,皮影的装束) \JS(动作,皮影的操纵者) 2.HTML目录树 3.HTML-标签成对<>组成,不区分大小写,自闭合标签 ...
Hyper-V动态迁移中？小心性能损失
动态迁移是虚拟化技术的一个标志,它允许虚拟机在服务器间进行动态迁移.调节负载平衡.性能管理.备灾管理和数据中心维护.Windows Server 2012 R2中的Hyper-V动态迁移默认功能具备相 ...
Excel动画教程50例（一）
Excel动画教程50例(一) 1.自动筛选 2.在Excel中字符替换 3.在Excel中冻结行列标题 4.在Excel中为导入外部数据 5.在Excel中行列快速转换 6.共享Excel工作簿 7 ...

bootstrap之常见组件应用1

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

随机推荐

热门专题