1.按钮

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>start</title>

 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">

 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap.js"></script>

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

 <!--[if lt IE 9]>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

 </head>

 <body>

      <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>用户</a>

 </body>

 </html>

2.按钮群组

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>start</title>

 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">

 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap.js"></script>

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

 <!--[if lt IE 9]>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

 </head>

 <body>

     <div class="container">

         <div class="btn-group">

            <button class="btn btn-default" type="button">左对齐</button>

       <button class="btn btn-default" type="button">居中</button>

       <button class="btn btn-default" type="button">右对齐</button>

        </div>

   </div>

 </body>

 </html>

3.带下拉菜单的按钮

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>start</title>

 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">

 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap.js"></script>

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

 <!--[if lt IE 9]>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

 </head>

 <body>

     <div class="container">

       <h1 class="page-header">按钮<small>带有下拉的按钮</small></h1>

         <div class="dropdown">

                <button type="button" class="btn btn-default  dropdown-toggle"  data-toggle="dropdown" >字体<span class="caret"></span></button>

               <ul class="dropdown-menu">

                   <li><a href="#">黑体</a></li>

                 <li><a href="#">黑体</a></li>

                 <li><a href="#">黑体</a></li>>

               </ul>

            </div>

   </div>

 </body>

 </html>

4.导航

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>start</title>

<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="../js/bootstrap.js"></script>

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

<!--[if lt IE 9]>

        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div class="container">

  <h1 class="page-header">导航</h1>

    <ul class="nav nav-tabs">

      <li  class="active"><a href="#">Home</a></li>

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

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

    </ul>

</div>

</body>

</html>

5.导航菜单

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

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

 <title>start</title>

 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">

 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap.js"></script>

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

 <!--[if lt IE 9]>

         <script src="../js/html5shiv.min.js"></script>

       <script src="../js/html5shiv.min.js"></script>

 <![endif]-->

 </head>

 <body>

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

         <div class="container-fluid">

           <div class="navbar-header">

               <a class="navbar-brand" href="#">出驾</a>

           </div>

         <ul class="nav navbar-nav">

             <li class="active"><a href="#">链接1</a></li>

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

           <li class="dropdown">

               <a href="#" type="button" class="dropdown-toggle" data-toggle="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>

             </ul>

           </li>

         </ul>

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

             <div class="form-group">

               <input type="text" class="form-control" placeholder="Search">

             </div>

             <button type="submit" class="btn btn-default">提交</button>

           </form>

         <ul class="nav navbar-nav navbar-right">

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

             <li class="dropdown">

               <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>

               <ul class="dropdown-menu">

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

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

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

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

             </ul>

           </li>

         </ul>

       </div>

     </nav>

 </body>

 </html>

Boostrap(4)的更多相关文章

  1. Boostrap入门(一)

    1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...

  2. Boostrap

    基本认知: Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面. Bootstrap的优缺点: 缺点: 1. ...

  3. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  4. 用H5+Boostrap做简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...

  5. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  6. 我发现调用boostrap的弹框

    在引用了boostrap.js和boostrap.css之后 本来boostrap是基于jQuery的.但是我们的项目里没有用jQuery,而是用的zepto. 调用boostrap的弹框有两种方式: ...

  7. Boostrap栅格系统

    Boostrap排版.链接样式设置了基本的全局样式.分别是:为body元素设置 布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器.Bootstrap提供了两个作此用 ...

  8. boostrap中lg,md,sm,xs

    boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示 ...

  9. AngularJS Boostrap Pagination Sample

    首先,样式是这样的 首先,Service端是Webapi REST JSON格式 第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...

  10. H5+Boostrap的音乐播放器

    H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...

随机推荐

  1. ubuntu 添加启动器

    终于搞定了安卓开发环境,不知道折腾了多少次,多少个IDE,解决了一个问题,又冒出一个问题.烦死了,最后关头,都快放弃了,重启电脑,打开 android stuio 编译运行居然陈宫了,没有报错,why ...

  2. 【OpenCV】全景拼接

    从OpenCV3.0正式版开始,features2d中的一些接口,搬到附加库xfeatures2d中了,其中就有SIFT.SURF的特征检测方法,但是正常下载安装OpenCV并不包含附加库,因为附加库 ...

  3. windows下如何安装jira

    ---恢复内容开始--- 准备工作: 1.安装jdk,详细不在介绍 2.建立jira帐号:https://id.atlassian.com/login?application=mac&cont ...

  4. c++仿函数 functor

    内容整理自国外C++教材 先考虑一个简单的例子:假设有一个vector<string>,你的任务是统计长度小于5的string的个数,如果使用count_if函数的话,你的代码可能长成这样 ...

  5. 边工作边刷题：70天一遍leetcode: day 86-1

    Find Median from Data Stream 要点: 基本框架:两个heap:large,small把所有数二分.一个新的element.目标:维持heap中的元素个数相同.错误理解:新元 ...

  6. HDU 5102 The K-th Distance

    题意:给你n-1条边,然后没两个节点的距离按照递增的顺序,求出前k项的和. 官方题解: 把所有边(u,v) 以及(v,u)放入一个队列,队列每弹出一个元素(u,v),对于所有与u相邻的点w,如果w!= ...

  7. Resharper团队协作之TODO

    TODO 需求 首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就 ...

  8. 较多java书籍的网站 tools138.com

    http://www.tools138.com/front/resource/java_book.jsp

  9. Gitblit-Git版本服务器环境部署

    Gitblit介绍 Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库.相当于 Git 的 Java 管理工具,支持linux系统. Git是分布式版本控制系统,它强调速度.数 ...

  10. 课程3——程序结构关键字

    声明:本系列随笔主要用于记录c语言的常备知识点,不能保证所有知识正确性,欢迎大家阅读.学习.批评.指正!!你们的鼓励是我前进的动力.严禁用于私人目的.转载请注明出处:http://www.cnblog ...