全面解析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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
javascript 写类方式之七
Jul 05 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
详解Bootstrap按钮
Jan 04 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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 如何获取数组第一个值
2013/08/06 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
python常见的格式化输出小结
2016/12/15 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python 发送邮件方法总结
2020/08/10 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
数据库笔试题
2013/05/09 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
物业经理求职自我评价
2013/09/22 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
车间统计员岗位职责
2014/01/05 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
运动会开幕式主持词
2015/07/01 职场文书
初中地理教学反思
2016/02/19 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android