Bootstrap学习笔记（三）

三、组件

　　1、图标字体　　　　

　　　　　图标字体本质是文字，而不是图形！可以无限放大或修改颜色。　　　

　　　　使用方式：<span class="glyphicon glyphicon-XXX"></span>
　　　　一组span标签只能放置一个图标

　　2、按钮组件　　　　

　　　　<div class="btn-group">
　　　　.btn
　　　　...
　　　　.btn
　　　　</div>
　　　　水平按钮组：.btn-group
　　　　竖直按钮组：.btn-vertical
　　　　两端对齐的按钮组：.btn-group .btn-group-jusitified　　

 <!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>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

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

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

     <![endif]-->

   </head>

     <body>

         <div class="container">

             <h2>组件 —— 按钮组</h2>

             <h3>水平按钮组</h3>

             <div class="btn-group">

                 <a href="#" class="btn btn-info">

                 <span class="glyphicon glyphicon-step-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-play"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-pause"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-stop"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-step-forward"></span>

                 </a>

             </div>

             <hr>

             <h3>两端调整对齐</h3>

             <div class="btn-group btn-group-justified">

                 <a href="#" class="btn btn-info">

                 <span class="glyphicon glyphicon-step-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-play"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-pause"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-stop"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-step-forward"></span>

                 </a>

             </div>

             <hr>

             <h3>竖直按钮组</h3>

             <div class="btn-group-vertical">

                 <a href="#" class="btn btn-info">

                 <span class="glyphicon glyphicon-step-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-backward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-play"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-pause"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-stop"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-fast-forward"></span>

                 </a>

                 <a href="#" class="btn btn-info">

                     <span class="glyphicon glyphicon-step-forward"></span>

                 </a>

             </div>

         </div>

         <script src="js/jquery-1.11.3.js"></script>

         <script src="js/bootstrap.js"></script>

     </body>

 </html>

　　3、下拉菜单

　　　　下拉菜单必需的三级结构：　　　　　　

　　　　　　　<div class="dropdown"> //相对定位的父元素
　　　　　　　　　　<a datatoggle="dropdown">触发元素</a> //触发元素
　　　　　　　　　　<div/ul class="dropdown-menu"> //绝对定位默认隐藏的菜单
　　　　　　　　　　　　隐藏元素
　　　　　　　　　　</div/ul>
　　　　　　<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>下拉菜单</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

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

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

     <![endif]-->

   </head>

   <body>

     <div class="container">

         <h1>下拉菜单</h1>

         <div class="dropdown">

             <a data-toggle="dropdown" href="#" class="btn btn-default">产品大全

                 <span class="caret"></span>

             </a>

             <ul class="dropdown-menu">

                 <li><a href="#">冰箱</a></li>

                 <li><a href="#">洗衣机</a></li>

                 <li><a href="#">电视</a></li>

                 <li><a href="#">尿不湿</a></li>

                 <li><a href="#">奶粉</a></li>

             </ul>

         </div>

     </div>

     <script src="js/jquery-1.11.3.js"></script>

     <script src="js/bootstrap.js"></script>

   </body>

 </html>

　　4、媒体对象　

　　　　默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。　　　

　　　　媒体对象列表：用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

　　　　</div>

　　5、列表组　

　　　　列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

　　　　最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。　　　

　　　　用于ul/ol的列表组：
　　　　<ul class="list-group">
　　　　　　<li class="list-group-item">
　　　　</ul>
　　　　用于div的列表组
　　　　<div class="list-group">
　　　　　　<a class="list-group-item" href="#">
　　　　</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>列表组</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

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

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

     <![endif]-->

   </head>

   <body>

     <div class="container">

         <h1>Bootstrap组件——列表组</h1>

     <h3>用于ul/ol的列表组</h3>

     <ul class="list-group">

       <li class="list-group-item">豆蔻年华</li>

       <li class="list-group-item">青葱岁月</li>

       <li class="list-group-item">峥嵘岁月</li>

       <li class="list-group-item">人之暮年</li>

     </ul>

     <ul class="list-group">

       <li class="list-group-item"><a href="#">豆蔻年华</a></li>

       <li class="list-group-item"><a href="#">青葱岁月</a></li>

       <li class="list-group-item"><a href="#">峥嵘岁月</a></li>

       <li class="list-group-item"><a href="#">人之暮年</a></li>

     </ul>

     <h3>用于div的列表组</h3>

     <div class="list-group">

       <a class="list-group-item" href="#">豆蔻年华</a>

       <a class="list-group-item active" href="#">青葱岁月</a>

       <a class="list-group-item" href="#">峥嵘岁月</a>

       <a class="list-group-item" href="#">人之暮年</a>

     </div>

     </div>

     <script src="js/jquery-1.11.3.js"></script>

     <script src="js/bootstrap.js"></script>

   </body>

 </html>

　　6、导航

　　　　Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

　　　　有两种导航组件：
　　　　　　--胶囊式导航组件
　　　　　　　　<ul class="nav nav-pills"></ul>
　　　　　　--标签页式导航组件
　　　　　　　　<ul class="nav nav-pills"></ul>　

 <!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>媒体对象</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

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

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

     <![endif]-->

   </head>

   <body>

     <div class="container">

         <h1>Bootstrap组件——导航组件</h1>

     <h2>标签页式的导航</h2>

     <ul class="nav nav-tabs">

       <li><a data-toggle="tab" href="#">10元套餐</a></li>

       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>

       <li><a data-toggle="tab" href="#">30元套餐</a></li>

     </ul>

     <h2>胶囊式的导航</h2>

     <ul class="nav nav-pills">

       <li><a data-toggle="tab" href="#">10元套餐</a></li>

       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>

       <li><a data-toggle="tab" href="#">30元套餐</a></li>

     </ul>

     <h2>标签页式的导航(满屏)</h2>

     <ul class="nav nav-tabs nav-justified">

       <li><a data-toggle="tab" href="#">10元套餐</a></li>

       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>

       <li><a data-toggle="tab" href="#">30元套餐</a></li>

     </ul>

     <h2>竖直排布的胶囊式导航</h2>

     <ul class="nav nav-pills nav-stacked col-sm-2">

       <li><a data-toggle="tab" href="#">10元套餐</a></li>

       <li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>

       <li><a data-toggle="tab" href="#">30元套餐</a></li>

     </ul>

     </div>

     <script src="js/jquery-1.11.3.js"></script>

     <script src="js/bootstrap.js"></script>

   </body>

 </html>

　　7、响应式导航条

　　　　导航条：navbar

　　　　响应式导航条组成：导航条的主体(相当于文章标题)+内容组成(相当于列表项)

　　　　==》 navbar=navbar-header+navbar-collapse

　　　　导航条的主体组成：网站LOGO+菜单切换按钮(只在xs屏幕下显示)

　　　　==》 nav-header=nav-brand+nav-toggle

　　　　内容组成：导航+表单+超链接+文本+……

　　　　==》 nav-collopse=navbar-nav+navbar-form+navbar-link+nav-text+……　　　　

　　　　导航条的基本结构——看XS中展开后的效果：

　　　　Bootstrap中提供的导航条的分类：
　　　　　　1) 按照颜色来分：
　　　　　　　　nav-dafault：浅色底、深色字
　　　　　　　　nav-inverse：深色底、浅色字
　　　　　　2) 按照位置来分：
　　　　　　　　顶部导航条
　　　　　　　　底部导航条
　　　　　　3) 按照定位(position)方式分
　　　　　　　　相对定位：relative(默认)，占布局空间，随内容滚动
　　　　　　　　固定定位：fixed，不占布局空间，不随内容的滚动而滚动
　　　　　　　　　　　　　navbar-fixed-top
　　　　　　　　　　　　　navbar-fixed-bottom
　　　　注意：固定定位的导航条不占布局空间，body必须设置足够的margin-top/bottom，否则部分内容会被导航条覆盖。

 <!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>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9] -->

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

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

     <!-- [endif]-->

     <style>

       body {

         /*margin-top: 50px;*/

         margin-bottom: 50px;

       }

     </style>

   </head>

   <body>

     <div class="navbar navbar-default">

       <div class="container">

         <div class="navbar-header">

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

           <a href="#" class="navbar-toggle">

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

           </a>

         </div>

         <div class="navbar-collapse">

           <ul class="nav navbar-nav">

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

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

             <li class="dropdown">

               <a href="#" data-toggle="dropdown">PRODUCTS<span class="caret"></span></a>

               <ul class="dropdown-menu">

                 <li><a href="#">冰箱</a></li>

                 <li><a href="#">电视</a></li>

                 <li><a href="#">洗衣机</a></li>

                 <li><a href="#">空调</a></li>

                 <li><a href="#">箱包</a></li>

                 <li><a href="#">奶粉</a></li>

               </ul>

             </li>

           </ul>

           <a href="#" class="navbar-link navbar-text navbar-right">Register</a>

           <span class="navbar-right navbar-text">|</span>

           <button class="navbar-right navbar-btn btn btn-success btn-sm">Login</button>

           <form action="" class="navbar-form navbar-right">

             <label for="search" class="sr-only">请输入搜索内容：</label>

             <div class="input-group">

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

               <span class="input-group-btn">

                 <button class="btn btn-default" type="button">

                   <span class="glyphicon glyphicon-search"></span>

                 </button>

               </span>

             </div>

           </form>

         </div>

       </div>

     </div>  

     <div class="container">

       <h1>Bootstrap组件——响应式导航条</h1>

     </div>  

     <div class="navbar navbar-fixed-bottom navbar-inverse">

       <div class="container">

         <div class="navbar-header">

           <a href="#" class="navbar-brand"><img src="img/logo.png" style="margin-top: -16px;"></a>

           <a href="#" class="navbar-toggle">

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

           </a>

         </div>

         <div class="navbar-collapse">

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

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

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

             <li class="dropdown">

               <a href="#" data-toggle="dropdown">PRODUCTS<span class="caret"></span></a>

               <ul class="dropdown-menu">

                 <li><a href="#">冰箱</a></li>

                 <li><a href="#">电视</a></li>

                 <li><a href="#">洗衣机</a></li>

                 <li><a href="#">空调</a></li>

                 <li><a href="#">箱包</a></li>

                 <li><a href="#">奶粉</a></li>

               </ul>

             </li>

           </ul>

         </div>

       </div>

     </div>

     <script src="js/jquery-1.11.3.js"></script>

     <script src="js/bootstrap.js"></script>

   </body>

 </html>

　　　8、其他　　　　　　

　　　　　　面包屑导航：ul/ol.breadcrumb
　　　　　　数字型分页：ul/ol.pagination
　　　　　　翻页行分页条：ul/ol.page
　　　　　　标签：<span class="label">提示文字</span>
　　　　　　徽章：<span class="badge">数字</span>
　　　　　　巨幕：<div class="jumbotron"></div>
　　　　　　页头：<div class="page-header"></div>
　　　　　　水井：div.well
　　　　　　进度条：.progress>.pregress-bar
　　　　　　缩略图：<div/a class="thumgnail"></div/a>

Bootstrap学习笔记（三）的更多相关文章

bootstrap学习笔记<三>（文本，代码域，列表）
文本对齐 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 <p class="text-left ...
Bootstrap学习笔记(三) 网格系统
4-1实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Boo ...
angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
[Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

随机推荐

Unusual Sequences
题意: 求解合为 y 的总体 gcd 为 x 的正整数非空序列个数. 解法: 特判一下后,原问题等价于合为 s = y/x 的整体gcd为1的正整数序列个数. 1.$ans = \sum_{\sum{ ...
mongodb切换到admin
127.0.0.1:后面是端口,/admin是切换到管理员权限 cd C:\Program Files\MongoDB\Server\3.0\bin mongo.exe 127.0.0.1:27017 ...
linux docket
什么是 Docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的一次革新,并于 ...
Spring入门第二十四课
Spring对JDBC的支持直接看代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql ...
Oracle 11g 、 Oracle 11g select 、 PLSQL 、 Sql Server迁移助手(SSMA)6.0/7.1 网盘下载地址
- - - - - - - - 链接: https://pan.baidu.com/s/1q-uwAfeLOPxzBBx6V1pYLg 提取码: hei9
开源文字识别软件tesseract
1.下载4.0软件,下一步下一步到成功: 2.安装之后配置环境变量,Path中添加安装路径(默认:C:\Program Files (x86)\Tesseract-OCR) 3.新增语言库的环境变量, ...
Codeforces Round #507 (Div. 2）C（贪心，逆向遍历，构造）
#include<bits/stdc++.h>using namespace std;int order[300007];long long t[300007],ans[300007];i ...
UML——前两章
前言软件开发过程中,在生命周期中,我们大都知道要写文档,但是针对这种团队集体完成的事情,如果中间出现了人员流动问题,这时侯有文档仅仅是不够的.为了让大多数开发人员和用户能直观的了解软件开发的进度和流 ...
docker 推送镜像到私有地址
下面针对的都是docker官网的地址先登录 docker login 输入docker ID ID不是你的注册邮箱,指的是你登录后显示的ID,然后输入密码 ....此时认为你已经登陆成功了接着看下 ...
springboot批量导入excel数据
1 背景小白今天闲着没事,在公司摸鱼,以为今天有事无聊的一天,突然上头说小子,今天实现一下批量导入Excel数据吧,当时我的内心是拒绝的,然后默默打开idea. 2 介绍 2.1 框架 java本身 ...

Bootstrap学习笔记（三）

Bootstrap学习笔记（三）的更多相关文章

随机推荐

热门专题