bootstrap学习8-输入框和导航栏组件

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>输入框和导航栏组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
<body style="margin:50px;">
     <!--导航条组件
         nav
         navbar 基本样式
         navbar-default 基本情景
         navbar-header 标题头
         navbar-brand  标题
    navbar-nav
         active 首选项
         disabled 禁用
         navbar-right  右边
         navbar-left  左边
         navbar-form 导航条表单
         navbar-btn 按钮
         navbar-text 文字
         navbar-link 链接（必须放在text中）
         navbar-fixed-top 固定到顶部
         navbar-fixed-bottom 固定到底部
         navbar-static-top 静态导航和页面等宽
     -->
     <nav class="nav navbar-default navbar-fixed-top">
         <div class="container">
             <div class="navbar-header">
             <a  href="#" class="navbar-brand">标题</a>
          </div>
          <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">产品</a></li>
              <li class="disabled"><a href="#">咨询</a></li>
              <li><a href="#">关于</a></li>
          </ul>
          <form class="navbar-form navbar-right">
              <div class="input-group">      
        <input type="text" class="form-control" />
      <span class="input-group-addon">$</span>
        </div>
          </form>
         <button class="btn btn-default navbar-btn navbar-left">按钮</button>
         <p class="navbar-text">我是一段文字<a href="" class="navbar-link">链接</a></p>
         </div>
     </nav>
     <p>2</p><p>3</p><p>4</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
     <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
     <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
     <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
     <p>1</p><p>1</p><p>1</p><p>1</p><p>6</p><p>4</p>
       
    <!--
        input-group 分组
        input-group-addon 添加值和属性
        form-control 表单基本样式
    -->
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" />
    </div>
      <div class="input-group">      
        <input type="text" class="form-control" />
      <span class="input-group-addon">$</span>
      </div>
    <div class="input-group">
         <span class="input-group-addon">$</span>
        <input type="text" class="form-control" />
      <span class="input-group-addon">$</span>
      </div>    
      <div class="input-group">
         <span class="input-group-addon"><input type="checkbox"/></span>
         <span class="input-group-addon"><input type="radio"/></span>
        <input type="text" class="form-control" />
      <span class="input-group-addon">$</span>
      </div>    
      
     <div class="input-group input-lg ">
         <span class="input-group-btn">
             <button class="btn btn-default">按钮</button>
         </span>
        <input type="text" class="form-control" />
      </div>    
    
    <div class="input-group input-lg ">  
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <button class="btn btn-default">下拉菜单</button>
            <button class="btn btn-default" data-toggle="dropdown">
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div>
    </div>    
    <!--
        nav 导航栏样式
        nav-pills 胶囊式导航
        nav-tabs实现标签的导航
        nav-stacked 垂直式导航
        nav-justified 导航栏两端对齐
        disabled 禁用
    -->
     <ul class="nav nav-pills">
         <li><a href="#">首页</a></li>
         <li><a href="#">咨询</a></li>
         <li><a href="#">产品</a></li>
         <li><a href="#">关于</a></li>
     </ul>
    
      <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#">首页</a></li>
         <li><a href="#">咨询</a></li>
         <li><a href="#">产品</a></li>
         <li><a href="#">关于</a></li>
     </ul>
    
         <ul class="nav nav-pills nav-tabs nav-justified">
         <li class="active"><a href="#">首页</a></li>
         <li><a href="#">咨询</a></li>
         <li class="dropdown">
            <a  href="#" 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>
                <li><a href="#">4</a></li>
            </ul>
        </div>
         </li>
         <li><a href="#">关于</a></li>
     </ul>
    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
  </body>
</html>

时间： 2024-11-11 03:04:19

bootstrap学习8-输入框和导航栏组件的相关文章

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后

HTML&amp;CSS基础学习笔记1.11—导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html><html

bootstrap学习9-路径分页和徽章组件

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>路径分页和徽章组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style=

bootstrap学习笔记&lt;十&gt;（导航）

1)最基本的按钮导航 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基本按钮导航</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn

bootstrap学习笔记&lt;十一&gt;（导航条）

基础导航条.样式:class="navbar navbar-default",属性:role="navigation" <div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="

Html学习之十三（导航栏的制作）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航效果</title> <style type="text/css"> .tab-item{ list-style: none; font-family: "宋体"; font-size: 18px; text-decoration: none

[学习]京东首页顶部导航栏hover

这里要说的内容就是这个小尖角: 开始只看到网页截图的时候我一直认为是一个">"做的hover效果. 这样的话就需要先把">"先旋转90度,再做hover的效果. 后来打开了原网页看了源代码,发现他们是这么做的: 首先画了一个15x7的div,overflow:hidden;然后里面写了一个"◇"font-size:15px;定位,上移7px; (这样我们看到的效果就是">"旋转了90度的样子) 再加上hove

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro