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组件的时候,都会有这样的一个需求: 我 ...

随机推荐

http 调用错误处理
1. http code 在使用Nginx时,经常会碰到502 Bad Gateway和504 Gateway Time-out错误,下面以Nginx+PHP-FPM来分析下这两种常见错误的原因和解决 ...
IOS后台执行
大多数应用程序进入后台状态不久后转入暂停状态.在这种状态下,应用程序不执行任何代码,并有可能在任意时候从内存中删除.应用程序提供特定的服务,用户可以请求后台执行时间,以提供这些服务. 判断是否支持多线 ...
2018.11.7 Nescafe29 T1 穿越七色虹
题目题目背景在 Nescafe27 和 28 中,讲述了一支探险队前往 Nescafe 之塔探险的故事…… 当两位探险队员以最快的时间把礼物放到每个木箱里之后,精灵们变身为一缕缕金带似的光,簇簇光 ...
洛谷P1164小A点菜
这也是一道01背包的题用的方法比较的巧妙.这个动态规划相当于反过来做的,自己理解就知道了.代码很短 #include<bits/stdc++.h> using namespace std ...
【点分树】codechef Yet Another Tree Problem
已经连咕了好几天博客了:比较经典的题目题目大意给出一个 N 个点的树和$K_i$, 求每个点到其他所有点距离中第 $K_i$ 小的数值. 题目分析做法一:点分树上$\log^3$ 首先暴力做法: ...
SpringBoot之YAML
SpringBoot的配置文件有两种,一种是properties结尾的,一种是以yaml或yml文件结尾的我们讨论一下yml文件结尾的文件: 基本语法: 其实yml文件就是键值对的形式,不过就是键( ...
python笔记-list列表的方法
#!usr/bin/python # -*- coding: utf-8 -*- # 存储5个人的年龄,求他们的平均年龄 age1 = 18 age2 = 15 age3 = 38 age4 = 20 ...
python---列表（list）基本操作
列表基本操作:增.删.查.改等其他操作创建列表: list1 = ["a","b","c","d"] name_lis ...
systick运用
systick的原理前一篇博文有介绍,简而言之就是SysTick定时器是一个24位的倒计数,当倒计数为0时,将从RELOAD寄存器中取值作为定时器的初始值,同时可以选择在这个时候产生中断(异常号:15 ...
The Tower of Babylon UVA - 437 DAG上的动态规划
题目:题目链接思路:每个方块可以用任意多次,但因为底面限制,每个方块每个放置方式选一个就够了,以x y为底 z 为高,以x z为底 y 为高,以y z为底 x为高,因为数据量很小,完全可以把每一种当 ...

bootstrap之常见组件应用1

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

随机推荐

热门专题