简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> JS Tutorial> body text

全面解析Bootstrap布局组件应用_javascript技巧

Jennifer Aniston
Release： 2016-05-16 15:14:11
Original
1221 people have browsed it

本文示例介绍了Bootstrap布局组件应用，分享给大家供大家参考，具体内容如下

字体图标的应用示例

Copy after login

下拉菜单示例
Copy after login

按钮工具栏与按钮组

Copy after login

按钮下拉菜单
Copy after login

表单中的输入框组

 
  .00
Copy after login

导航（tab标签页）

标签式的导航菜单
  
基本的胶囊式导航菜单
  
垂直的胶囊式导航菜单
Copy after login

导航栏

Copy after login

响应式的导航栏

以下金黄色部分为对一般的导航栏的区别

Copy after login

面包屑导航

     
  1. Home
    2.  
  2. 2013
    3.  
  3. 十一月
    4.
Copy after login

分页和翻页
Copy after login

标签

默认标签 主要标签 成功标签 信息标签 警告标签 危险标签
Copy after login

徽章

徽章比标签更圆滑，主要用于突出显示新的或未读的项

Copy after login

超大屏幕

 
 
欢迎登陆页面！
 
这是一个超大屏幕（Jumbotron）的实例。
 
 学习更多
Copy after login

页面标题示例

 
页面标题实例 子标题
Copy after login

缩略图

 通用的占位符缩略图 
 
 
缩略图标签
 
一些示例文本。一些示例文本。
 
  按钮   按钮
Copy after login

警告

  成功！很好地完成了提交。 
 
  成功！很好地完成了提交。 
 
  警告！请不要提交。 
 
  错误！请进行一些更改。
Copy after login

进度条

 
  
 90% 完成（成功） 
 
  
 
 40% 完成 
 
 30% 完成（信息） 
 
 20% 完成（警告）
Copy after login

媒体标签

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

     
  •   通用的占位符图像  
     
    媒体标题
     
    这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
      
      通用的占位符图像  
     
    嵌套的媒体标题
     这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。  
      通用的占位符图像  
     
    嵌套的媒体标题
     这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 
     
     
     
      
      通用的占位符图像  
     
    嵌套的媒体标题
     这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 
     
     
     
    •  
  •   通用的占位符图像  
     
    媒体标题
     这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 
     
    •
Copy after login

列表组

 
     
  • 免费域名注册
    •  
  •  新 24*7 支持 
    •  
  • 每年更新成本
    •  
  •  新 折扣优惠 
    •  
  
  
 入门网站包 
   
 免费域名注册 
 
 您将通过网页进行免费域名注册。 
   
 24*7 支持 
 
 我们提供 24*7 支持。
Copy after login

面板

 
 
 带有 title 的面板标题 
 
 
 面板内容 
  
 
产品价格  
产品 A200
 
产品 B400
 
  
     
  • 免费域名注册
    •  
  • 免费 Window 空间托管
    •  
  • 图像的数量
    •  
  • 24*7 支持
    •  
  • 每年更新成本
    •  
 
面板脚注
Copy after login

well效果

Well 是一种会引起内容凹陷显示或插图效果的容器

您好，我在大的 Well 中！
 
您好，我在小的 Well 中！
Copy after login

以上就是本文的全部内容，希望对大家的学习有所帮助。

Related labels：
bootstrap layout component
source：php.cn
Previous article：JS实现的仿QQ空间图片弹出效果代码_javascript技巧 Next article：JQUERY表单暂存功能插件分享_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Laravel 9 still can't find App.css and App.js, even after running npm run dev Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...
From 2023-10-26 23:41:22
0
1
489
Customize Bootstrap 4's grid system breakpoints I have an application where the design requires 1280 breakpoints from desktop to tablet or...
From 2023-10-18 23:01:50
0
2
197
How to make header images, text and buttons responsive I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...
From 2023-09-17 09:51:15
0
1
283
Why doesn't my Bootstrap navigation bar render correctly? I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...
From 2023-09-16 16:14:06
0
1
522
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！