全面解析Bootstrap中form、navbar的使用方法


Posted in Javascript onMay 30, 2016

一、表单(Form)

源码文件:
_form.scss
mixins/_form.scss

1、按层次结构分:form-group -> form-control/input-group/form-static-control -> 各类标签
2、Form-group/form-control/input-group/form-static-control之类的容器,分为两种显示方式:block、inline-block。而实现input-group水平用的是table-cell。

.input-group {
  display: inline-table;
  vertical-align: middle;
  .input-group-addon,
  .input-group-btn,
  .form-control {
  width: auto;
  }
}

3、Input-group-addon:类如果插入网页文字图标,会向上一个像素的错位

全面解析Bootstrap中form、navbar的使用方法

解决方案:glyphicon不能与其他样式合并使用,而是内部嵌套使用即可,因为glyphicon对top有1个像素的设置:

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

二、导航条(navbar)

源码文件:
_navbar.scss

1、主要进行了内部区域的划分,如:head、其他区域;以及导航条位置的定位
2、折叠器实现(在4.0已移除),也就是navbar-collapse类,代替的是collapse,在按钮上面弹出隐藏层
   2.1、Navbar-collapse:在大于breakpoint时,会强制显示(由于collapse默认是隐藏的)
3、内容支持nav、brand、form、toggler
4、Navbar-toggler(4.0移除):设定在屏幕小于breakpoint值时(768)显示,而在4.0则直接用collapse来展示此按钮,没有屏幕大小的限制,navbar-toggle的应用也要结合collapse使用
5、Navbar-static-top:只是增加了zIndex,去掉了圆角、边框宽度等内容。
6、Navbar-fixed-top/bottom:都是定位在上方、下方,有浮动影响
7、Navbar-brand:品牌,可以放网页名称、公司Logo等内容
8、Navbar-toggle:用于收缩的单击的图片,他会在小于breakpoint时显示,大于此值就隐藏(并且,toggle显示是右浮动,且作为相对定位元素):

.navbar-toggle {
 position: relative;
 float: right;
 margin-right: $navbar-padding-horizontal;
 padding: 9px 10px;
 @include navbar-vertical-align(34px);
 background-color: transparent;
 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 border: 1px solid transparent;
 border-radius: $border-radius-base;

 // We remove the `outline` here, but later compensate by attaching `:hover`
 // styles to `:focus`.
 &:focus {
 outline: 0;
 }

 // Bars
 .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
 }
 .icon-bar + .icon-bar {
 margin-top: 4px;
 }

 @media (min-width: $grid-float-breakpoint) {
 display: none;
 }
}

9、Navbar-nav:原nav的基础进行了一些兼容设置,主是在breakpoint-max下的样式调整,以及在breakpointg下的样式调整,还是去掉默认的背景色,shadow等内容
10、Navbar-form:主要调整所有form都为行内元素
11、Navbar-text、navbar-btn:都在默认的基础上做了相就的兼容设置
12、Navbar提供了default、inverse两种主题,各主题下对其各自的部件都做了相应的样式兼容处理
13、导航条本身的样式不多,本身只提供了toggle、brand两个内容,主要提供了两种主题,以及将dropdown、collapse、form、nav四个部件的组合。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
浅析Ajax语法
Dec 05 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
js实现日历
Nov 07 Javascript
js实现页面a向页面b传参的方法
May 29 #Javascript
浅析jQuery中使用$所引发的问题
May 29 #Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 #Javascript
jQuery实现图像旋转动画效果
May 29 #Javascript
jQuery中使用animate自定义动画的方法
May 29 #Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
You might like
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
javascript this详细介绍
2016/09/19 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python右对齐的实例方法
2020/07/05 Python
应用服务器有那些
2012/01/19 面试题
什么是serialVersionUID
2016/03/04 面试题
工厂厂长岗位职责
2013/11/08 职场文书
商场主管竞聘书
2014/03/31 职场文书
教师节倡议书
2014/08/30 职场文书
乐山大佛导游词
2015/02/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
2016年端午节寄语
2015/12/04 职场文书