专栏首页菲宇Bootstrap实用功能总结

Bootstrap实用功能总结

导航栏:navbar

导航栏容器可以包含以下几个常用组成:

1、品牌LOGO(.navbar-brand )

2、导航菜单(.navbar-nav)

3、导航文本(.navbar-text)

4、折叠导航按钮(.navbar-toggle)

5、表单(.form-inline)

一、导航容器一般使用nav标签来定义:

<nav class="navbar">...</nav>

导航容器可用样式:

.navbar

导航栏基础样式

.navbar-expand-{sm | md | xl | lg}

响应式导航,大屏幕水平铺开,小屏幕垂直堆叠

.flex-top

导航栏一直在顶部

.flex-bottom

导航栏一直在顶部

.bg-{primary | secondary | success | info | danger | warning | dark | light}

导航栏的背景颜色

.navbar-dark

导航配色方案。深色背景,加此样式可以突显文字

.navbar-light

导航配色方案。浅色背景,加此样式可突显文字

二、导航菜单一般使用ul、li来定义:

1 <nav class="navbar navbar-expand-md bg-light nav-light">
2   <ul class="navbar-nav">
3     <li class="nav-item active"><a href="#" class="nav-link ">菜单一</a></li> 
4     <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li> 
5     <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li> 
6   </ul> 
7 </nav>

导航菜单可用样式:

.navbar-nav

应用于ul标签

.nav-item 、 .active

应用于li标签

.nav-link 、 .disabled

应用于a标签

三、导航栏中加品牌元素(.navbar-brand):

 1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
 2   <!-- 品牌 -->
 3   <a href="#" class="navbar-brand">品牌LOGO</a>
 4 
 5   <!-- 菜单 -->
 6   <ul class="navbar-nav">
 7     <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
 8     <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
 9     <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
10   </ul>
11 </nav>

品牌可以是文字,也可以是图片。

四、导航文本类(.navbar-text),使用该类可以保证文字与导航样式统一:

 1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
 2   <!-- 品牌 -->
 3   <a href="#" class="navbar-brand">品牌LOGO</a>
 4   <!-- 菜单 -->
 5   <ul class="navbar-nav">
 6     <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
 7     <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
 8     <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
 9   </ul>
10   <span class="navbar-text">这是一句文字</span>
11 </nav>

五、折叠导航:小屏幕上我们都会折叠导航栏,通过点击来显示导航选项:

 1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
 2   <!-- 品牌 -->
 3   <a href="#" class="navbar-brand">品牌LOGO</a>
 4 
 5   <!-- 定义折叠按钮 -->
 6   <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu">
 7     <span class="navbar-toggler-icon"></span>
 8   </button>
 9 
10   <!-- 把菜单包含在容器内 -->
11   <div class="collapse navbar-collapse" id="nav-menu">
12     <ul class="navbar-nav">
13       <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
14       <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
15       <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
16     </ul>
17   </div>
18 </nav>

折叠导航注意事项:

1、定义折叠按钮时除了折叠的属性之外,还必须加上样式: .navbar-toggler

2、折叠按钮内加上折叠图标,样式: .navbar-toggler-icon

3、菜单要包含一个容器内,容器必须包含样式: .collapse 和 .navbar-collapse

六、导航内加表单时,一定要把表单加上内联样式(.form-inline)

导航一般采用ul、li来定义,否则有些效果无法实现,比如动态选项卡效果。

基础样式:

1 <ul class="nav">
2   <li class="nav-item"><a href="#" class="nav-link">导航一</a></li>
3 </ul>

导航样式及属性:

ul 标签可用样式及属性

.nav

导航基类

.nav-tabs

选项卡导航

.nav-pills

胶囊导航

.nav-justified

导航均分宽度

.flex-column

垂直导航

.justify-content-start | .justify-content-center | .justify-content-end

导航选项的对齐方式: .justify-content-start 默认,左对齐 .justify-content-center 居中对齐 .justify-content-right 右对齐

li 标签可用样式及属性

.nav-item

指定一个选项

.dropdown

指明该选项是一个下拉菜单(下拉菜单也可以不用指定)

a标签可用样式及属性

.nav-link

指定导航链接

.active

当前激活的导航链接

.disabled

禁用的导航链接

data-toggle = "{tab | pill }"

定义一个动态选项卡 或 动态胶囊选项卡

href = "#id"

动态导航时,指明要显示的容器ID

动态选项卡容器样式

.tab-pane

动态选项卡容器类,必须要加

动态下拉选项卡示例:

 1 <div class="container">
 2   <h3>定义动态下拉选项卡</h3>
 3   <ul class="nav nav-tabs" role="tablist">
 4     <li class="nav-item"><a href="#con1" class="nav-link active" data-toggle="tab">选项一</a></li>
 5     <li class="nav-item dropdown">
 6       <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉选项</a>
 7       <div class="dropdown-menu">
 8         <a href="#" class="dropdown-item">下拉一</a>
 9         <a href="#" class="dropdown-item">下拉二</a>
10       </div>
11     </li>
12     <li class="nav-item"><a href="#con2" class="nav-link" data-toggle="tab">选项二</a></li>
13     <li class="nav-item"><a href="#con3" class="nav-link" data-toggle="tab">选项三</a></li>
14     <li class="nav-item"><a href="#" class="nav-link disabled">禁用选项</a></li>
15   </ul>
16   
17   <div class="tab-content"> <!-- 这个类是必须的,否则异常 -->
18     <div id="con1" class="tab-pane active">
19       选项一内容
20     </div>
21     <div id="con2" class="tab-pane fade"><!-- fade 必须加 -->
22       选项二内容
23     </div>
24     <div id="con3" class="tab-pane fade"><!-- fade 必须加 -->
25       选项三内容
26     </div>
27   </div>
28 </div>

注意:

一)选项卡标签对应内容需注意事项:

a) 要放置在类:tab-content 的容器下,这是必需的,否则会出现异常。

b)必须添加 .tab-pane 类

c) 用.active表明当前选项卡内容。其它一定要加载 .fade 类。

【详解】模态框(modal)的使用

【详解】提示框(tooltip)的使用

【详解】弹出框(popover)的使用

justify-content-{around | between | start | center | end }内容对齐

rounded-{0 | top | right | bottom | left | circle } 边角半径设置

bootStrap实现垂直居中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模...

    葡萄城控件
  • BootStrap-table的使用实现排序功能

    Dream城堡
  • Chrome 功能总结

    原文:https://developers.google.com/web/updates/2017/08/devtools-release-notes#awai...

    mafeifan
  • php7 新增功能实例总结

    代码中通过指定 strict_types的值(1或者0),1表示严格类型校验模式,作用于函数调用和返回语句;0表示弱类型校验模式。

    砸漏
  • PHP7新功能总结

    • 已删除不推荐使用的SAPI和扩展 ——各种旧的和不支持的SAPI和扩展被从最新版本中删除。

    砸漏
  • chrome 开发者工具——前端实用功能总结

    例如我想查看元素触发 hover 时的 css 样式。先选中该元素,然后按下图操作:

    谭光志
  • Intellij IDEA调试功能使用总结

    专注于Java领域,追求简洁,每天推送高质量技术文章,实用教程。

    MonroeCode
  • Intellij IDEA调试功能使用总结

    这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此。 先编译好要调试的程序。 1.设置断点 ? 选定要设置断点的代码行,在行号的...

    MonroeCode
  • 基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

    在前面介绍了一系列的《基于Metronic的Bootstrap开发框架经验总结》的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本...

    MonroeCode
  • .htaccess文件常用功能总结 【原创】

    .htaccess文件常用功能总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: githu...

    CS逍遥剑仙
  • Intellij Idea调试功能总结

    逐过程step over(如果当前行有方法调用,这个方法将被执行完毕返回,然后到下一行)

    小小鱼儿小小林
  • Intellij IDEA 调试功能总结

    本文简单介绍 IDEA 编辑器的调试功能,主要包括断点调试、单点调试、高级调试。可以收藏本文章,使用到的时候方便查找。

    后端码匠
  • Android实现调用系统分享功能示例的总结

    Android调用系统分享文本信息、单张图片、多个文件和指定分享到微信、QQ的实例代码:

    砸漏
  • UILabel在开发中的常用功能总结

    在项目开发中,我们经常会遇到在这样情形: 1、在一个UILabel 使用不同的颜色或不同的字体来体现字符串 在iOS 6 以后我们可以很轻松的实现这一点,官...

    Python疯子
  • Python用了这么多年,总结出超实用的功能和特点

    在使用Python这么久,时不时就会发现了一些过去不知道的功能和特性。一些可以说是非常有用,但却没有充分利用。本篇文章总结出你应该了解的Python功能特色,希...

    一墨编程学习
  • bootstrap treeview实现target功能,iframe中打开页面

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • PHP实现登录注册之BootStrap表单功能

    前言 前面几篇简单介绍了一下前端与PHP的一些知识点,前端中表单提交是一个非常重要的模块,在本篇中我会介绍一些关于表单的知识,如果前面内容你掌握的不好并且没有大...

    用户2323866
  • 功能测试方法经验总结

    实际工作中,每个人可能都有多种多样、形形色色的测试方法,往往也都是混合使用。简单整理了我所理解及使用的一些方法(方法之间并不孤立),欢迎评论区聊聊属于你的方法。

    未来sky
  • 框架的 总结(nop)------添加功能

    wfaceboss

扫码关注云+社区

领取腾讯云代金券