BootStrap积累

信念堤岸

于 2017-03-07 13:59:33 发布

阅读量374

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/u012767607/article/details/60762796

版权

BootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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">×</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="#">«</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="#">»</a></li>
</ul>
«即"<<" »即">>"

//翻页效果
<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>×</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>×</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="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）

信念堤岸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap积累

BootStrap开发工具 HBuilder59.前端的一些框架和学习网址1.bootcsd框架视频： http://edu.ibeifeng.com/view-index-id-411.html2. 免费的erayui：3.extjs jqueryui fineui4.boot, 学习资料http://www.bootcss.com/
复制链接

扫一扫

专栏目录