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

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

字体图标的应用示例

下拉菜单示例

  
   主题
   
  
  

下拉菜单标题
   

     选项1
   
   

     选项2
   
   
 
     选项3
   
   


   

     分离的链接
   
  

按钮工具栏与按钮组

  

  
   Button 1
   Button 2
   Button 3
   
   

   Button 4
   Button 5
   Button 6
  
   

   Button 7
   Button 8
   Button 9
  

按钮下拉菜单

  


    
     默认 
   
   

功能
     
另一个功能
     
其他
     


     
分离的链接
   

表单中的输入框组

.00

Go!

导航（tab标签页）

标签式的导航菜单

基本的胶囊式导航菜单

垂直的胶囊式导航菜单

导航栏

   W3Cschool
  
  

   

iOS
     
SVN
     

      
        Java 
        
      
      

jmeter
        
EJB
        
Jasper Report
        

        
分离的链接
      

   

     

      

     提交
   
    
    
     导航栏按钮
   
    
    

       
导航栏文本 我是链接
      
    
  

响应式的导航栏

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

   
     
     
     
   
   W3Cschool
  
  

   

面包屑导航

Home
 
2013
 
十一月

分页和翻页

标签

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

徽章

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

超大屏幕

  

   
欢迎登陆页面！
   
这是一个超大屏幕（Jumbotron）的实例。
   

     学习更多
   
  

页面标题示例

  
页面标题实例
   子标题
  

缩略图

     

    

     
缩略图标签
     
一些示例文本。一些示例文本。
     

      
        按钮
       
      
        按钮
      
     
   

警告

  
   ×
  
  成功！很好地完成了提交。


  
   ×
  
  成功！很好地完成了提交。


  
   ×
  
  警告！请不要提交。


  
   ×
  
  错误！请进行一些更改。

进度条

  
  

   90% 完成（成功）
  



  

   40% 完成
  
  

   30% 完成（信息）
  
  

   20% 完成（警告）
  

媒体标签

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

• 

  媒体标题

  这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

  

  嵌套的媒体标题

  这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

  

  嵌套的媒体标题

  这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

  

  嵌套的媒体标题

  这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。
• 

  媒体标题

  这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。

列表组

• 免费域名注册
• 新 24*7 支持
• 每年更新成本
• 新 折扣优惠

入门网站包

免费域名注册

您将通过网页进行免费域名注册。

24*7 支持

我们提供 24*7 支持。

面板

  

   

     带有 title 的面板标题
   
  
  

   面板内容
  
  
  

产品
价格 
   

产品 A
200


产品 B
400



免费域名注册
   
免费 Window 空间托管
   
图像的数量
   
24*7 支持
   
每年更新成本
  
面板脚注

well效果

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

您好，我在大的 Well 中！
您好，我在小的 Well 中！

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• javascript怎么将值类型强制转为字符串
• javascript怎么判断字符串是否是数字
• 总结分享： 6 种JavaScript的打断点的方...
• JavaScript怎么求多个数的平均值
• 全面解析Bootstrap布局组件应用_javas...

• 下载 Bootstrap
• 在网页中使用 Bootstrap
• 什么是BootStrap