BootStrap积累

BootStrap开发工具   HBuilder


59.前端的一些框架和学习网址


1.bootcsd框架视频：   http://edu.ibeifeng.com/view-index-id-411.html
2.  免费的erayui：
3.extjs   jqueryui   fineui
4.boot,     学习资料http://www.bootcss.com/


学习总结笔记  


1.


（1）这是下划线 <li class="divider"></li>  
 (2) 向下的三角图标<span class="caret"></span>
（3）字型图标
  <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1>


【李炎恢老师移动开发之Bootstrap视频教程】2015-12-27


第2章：排版样式
     （1）<p class="lead">BootStrap框架</p>       这是段落突出的样式
     （2）<h1>框架<small>框架小标题</small></h1>  在h1-h6元素之间还可以嵌入一个small元素作为副标题
     （3）class="text-uppercase" 大写，


     （4）<ul class="list-unstyled">  //移除默认样式
           <li>BootStrap框架</li>
          </ul>
     （5）ul和li排列在一行，<ul class="list-inline">
     （6）dl,dt,dd水平排列成一行， <dl class="dl-horizontal">


第3章：表格和按钮
     （1）表格样式
         <table class="table table-striped"> 条纹表格
         <table class="table table-bordered"> 带边框的表格  
         <table class="table table-hover">   在tbody下表格悬停鼠标变色   


         <tr class="success">  单独设置某一行的背景样式 ,另外有：active,info,warning,danger样式
         <body class="table-responsive">响应式表格，小于768px出现边框
     （2）按钮
          <button class="btn btn-info">Button</button>
          共7种有样式：btn-default、btn-success,btn-info,btn-warning,btn-danger,btn-primary,btn-link


     （3）块级按钮，占满整行<button class="btn btn-block">Button</button>
     （4）
      
第4章：表单和图片
     （1）和父级元素样式同步<label class="control-label">  表示和父级元素样式同步 对label的应用


     （2）内联表单：<form class="form-inline"> </form>  表示内联一行的样式
                   <label class="checkbox-inline"><input type="checkbox">体育</label>
 
     （3）禁用：   <div class="disabled">


     （4）添加额外的图标：（文本框右侧内置文本图标）
  <div class="form-group has-feedback">
    <lable>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>


     （5）图片样式：
          <img src="" alt=""  class="img-rounded">（圆角边框） 另外还有class="img-circle" （圆形样式）  和 class="img-thumbnail"（相框样式）
     （6）表单组合，
          <div class="input-group">
           <div class="input-group-addon">￥</div>
           <input type="text" class="form-control">
           <div class="input-group-addon">.00</div>
          </div>
     （7）下拉列表
          <select class="form-control">
            <option>1</option>
            <option>2</option>
          </select>
     （8）background:transparent; 背景透明


第5章：栅格系统
     （1）class="col-md-offset-1"  便宜一个位置
     （2）布局容器
          <div class="containter"></div> 固定宽度
          <div class="containter-fluid"></div> 100%宽度


第6章 辅组类和响应式工具
     （1）关闭按钮
          <button class="close">&times;</button>
          
     （2）三角符号   
          <span class="caret"></span>
     （3）块级居中  
<div class="center-block">居中</div>  注：就是margin:x auto；并且设置了display:block;
     （4）清理浮动  
<div class="clearfix"></div>   注：放在需要清理浮动区块的前面即可
     （5）响应式工具
<div class="visible-xs-block a">Bootstrap</div>  //超小屏幕激活显示
<div class="hidden-xs a">Bootstrap</div> //超小屏幕激活隐藏
对显示的内容有是那种变体：block,inline-block,inline


第7章 图标菜单按钮组件(2015-12-29)
     （1）小图标组件
          BootStrap提供了263种小图标，可以参考中文组件链接：http://v3.bootcss.com/components/#glyphicons
          //使用小图标
          <i class="glyphicon glyphicon-star"></i>
          <span class="glyphicon glyphicon-star"></span>
//也可以结合按钮
<button class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>


     （2）下拉菜单组件
//基本格式
<div class="dropdown">         //按钮和菜单组需要包裹在dropdown的容器里
 <button class="btn btn-default" data-toggle="dropdown">
 下拉菜单
   <span class="caret"></span> //caret表示箭头
 </button>
<ul class="dropdown-menu">
 <li><a href="#">首页</a></li>
 <li class="divider"></li>   //菜单的分割线
 <li><a href="#">资讯</a></li>
 <li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>
</ul>
</div>
而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效


       //菜单项居右对齐，默认值是dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">


//设置菜单的分割线
<li class="divider"></li>
右边的圆角只要多加一个class="dropdown-toggle"即可


     （3）按钮组组件
按钮组就是多个按钮集成在一个容器里形成独有的效果。
//基本格式
<div class="btn-group">
   
第8章 输入框和导航组件


     （1）输入框
      文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。


//在两侧添加文字
     <div class="input-group input-group-lg"> //class="input-group input-group-lg"设置尺寸
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
     </div>


//左侧使用复选框和单选框
<div class="input-group">
<span class="input-group-addon"><input type="checkbox"></span>
<input type="text" class="form-control">
</div>


//右侧使用提交按钮
<div class="input-group">  
 <input type="text" class="form-control">
          <div class="input-group-btn">
<button class="btn btn-default">提交</button>
 </div>
</div>


     （2）导航组件
Bootstrap 提供了一组导航组件，用于实现Web 页面的栏目操作。


//基本导航标签页
<ul class="nav nav-tabs">
 <li class="active"><a href="#">首页</a></li>
 <li><a href="#">资讯</a></li>
 <li><a href="#">产品</a></a></li>
 <li><a href="#">关于</a></li>
</ul>


//胶囊式导航
<ul class="nav nav-pills">


     （3）导航条组件
导航条是网站中作为导航页头的响应式基础组件。即网站头部
//基本格式
<div class="navbar navbar-default">  //背景是浅灰色
......
</div>
//反色调单行TOP头部
<div class="navbar navbar-inverse">  //背景是黑色
</div>


//将导航固定在顶部，下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">


//基本导航条，包含标题和列表
<nav class="navbar navbar-default">
 <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>
</div>
</nav>


第9章 路径分页标签和徽章组件
     （1）路径组件
        路径组件也就是网页左上角的地址路径样式


        //面包屑导航                                 // 样式类似于：" 首页 / 产品列表 / 毛衣 "
<ol class="breadcrumb">
   <li><a href="#">首页</a></li>
   <li><a href="#">产品列表</a></li>
 <li class="active">毛衣</li>
</ol>
        
     （2）分页组件
提供带有展示页面的功能


//默认分页
<ul class="pagination">                         // class="pagination"分页组件的类
 <li><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>
         &laquo;即"<<"  &raquo;即">>"


//翻页效果
<ul class="pager">
 <li><a href="#">上一页</a></li>
 <li><a href="#">下一页</a></li>
</ul>
     （3）标签组件


     （4）未读信息数量徽章组件


//未读信息数量徽章
  <a href="#">信息<span class="badge">10</span></a>


//按钮中使用徽章
  <button class="btn btn-success">
   提交<span class="badge">3</span>
  </button>


第10章 巨幕页头缩略图和警告框组件
     （1）缩略图组件
//缩略图组件配合响应式
<div class="container">
<div class="row">
  <div class="col-xs-6 col-md-3 col-sm-4">
  <div class="thumbnail">
  <img src="img/pic.png" alt="">
  </div>
  </div>
</div>


     （2）警告框组件
//带关闭的警告框组件
<div class="alert alert-success">
  Bootstrap
   <button type="button" class="close" data-dismiss="alert">
     <span>&times;</span>
   </button>
</div>
第11章 进度条媒体对象和Well组件
     （1）well组件
这个组件实现简单的嵌入效果
<div class="well">BootStrap</div>
有lg和sm两种可能值
<div class="well well-lg">/div>
     （2）进度条组件
<div class="progress">
<div class="progress-bar progress-bar-success" style="min-width:20px">30%</div>
</div>
     （3）媒体对象组件
<div class="media">
 <div class="media-left">
  <img src="img/small.png" alt="" class="media-object">
  </div>
 <div class="media-body">
  <h4 class="media-heading">标题</h4>
          </div>
</div>
第12章 列表组面板和嵌入组件
     （1）列表组组件，  用于显示一组列表的组件
//基本实例
<ul class="list-group">
  <li class="list-group-item">1.这是起始</li>
  <li class="list-group-item">2.这是第二条数据</li>
  <li class="list-group-item">3.这是第三排信息</li>
</ul>
//链接和首选
<div class="list-group">
 <a href="#" class="list-group-item active">1.这是起始
 <span class="badge">10</span></a>
 <a href="#" class="list-group-item">2.这是第二条数据</a>
</div>
     （2）面板组件：  面板组件就是一个存放内容的容器组件（panel）
//带标题容器的面板
<div class="panel panel-default">
 <div class="panel-heading">
 面板标题
 </div>
 <div class="panel-body">
  这里是详细内容区！
 </div>
</div>
//情景效果：default、success、info、warning、danger、primary


可折叠面板：
             
     （3）响应式组件
     （4）
第13章 模态框插件
     （1）
//点击触发模态框显示
  <button class="btn btn-primary btn-lg" id="btn" data-toggle="modal" data-target="#myModal" data-backdrop="static">点击弹窗</button>
//基本实例
<!-- 模态框声明 -->
<div class="modal fade" id="myModal" tabindex="-1">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>&times;</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="container-fluid"> <!-- container-fluid在内容中引用流体 -->
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>


     （2）用法说明
第一种：可以通过data 属性
//data-toggle
data-toggle="modal" data-target="#myModal"
data-toggle 表示触发类型 data-target 表示触发的节点（与a href功能类似）
 
用到的一些类说明：
data-backdrop="static" 表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。
class="close"  表示关闭按钮，
data-dismiss="modal" 是点击关闭按钮就关闭的功能。


第15章 标签页和工具提示插件
     （1）tab选项卡
注意引用的jquery为1.11以上版本，否则1.9版本不管用的
<ul class="nav nav-tabs">
 <li class="active"><a href="#html5"data-toggle="tab">HTML5</a></li>
 <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
 <li><a href="#jquery" data-toggle="tab">jQuery</a></li>
 <li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;"><-->
<div class="tab-pane active" id="html5">
1标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
    </div>
<div class="tab-pane" id="bootstrap">
2标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
</div>
<div class="tab-pane" id="jquery">
3标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
 </div>
 <div class="tab-pane" id="extjs">
4标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
   </div>
</div>
用到， class="nav nav-tabs"   class="active"  class="tab-pane"  data-toggle="tab" 即触发的类型
     （2）工具提示
工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。
//基本实例
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明
<script type="type/JavaScript">
$('#section').tooltip();
</script>
     （3）
     （4）
第16章  弹出框和警告框插件
     （1）弹出框
     （2）
     （3）
     （4）
第17章  按钮插件和折叠面板插件
     （1）按钮插件（一些插件实现）
<button class="btn btn-primary" data-loading-text="Loading..." autocomplete="off">开始上传</button>


<script type="text/javascript">
$('button').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
  }, 1000);
});
</script>


     （2）折叠面板（实现）
     <div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
第一部分内容
</div>
</div>
</div>


<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
第二部分内容
</div>
</div>
</div>


<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
第三部分内容
</div>
</div>
</div>

     </div> 
     （3）
     （4）
第18章  轮播插件（就是类似于幻灯片的图片展示功能）
     （1）轮播插件
     （2）


第19章  附加导航插件
     （1）附加导航即粘贴在屏幕某处实现锚点功能
     （2）


第20章  项目实战
     （1）响应式导航
     （2）
     （3）
     （4）


     （1）按钮插件
     （2）
     （3）
     （4）