全面解析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/jquery获取文本框输入焦点的方法
Mar 04 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
vxe-table vue table 表格组件功能
May 26 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python打印不合法的文件名
2020/07/31 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
文明演讲稿范文
2014/05/12 职场文书
创先争优活动心得体会
2014/09/04 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
职工年度考核评语
2014/12/31 职场文书
党员争先创优承诺书
2015/01/20 职场文书
校运会宣传稿大全
2015/07/23 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
详解nginx location指令
2022/01/18 Servers