本文共 1607 字，大约阅读时间需要 5 分钟。

Bootstrap使用方法

• 1.创建一个html5模板
• 2.引入bootstrap.css
• 3.引入jquery.js
• 4.引入bootstrap.js

Bootstrap前端UI框架Glyphicons字体图标对照表

Boostrap网格布局介绍

link 标签中“rel=stylesheet”的作用

rel各个属性值配置的意思

• Alternate – 定义交替出现的链接
• Stylesheet – 定义一个外部加载的样式表
• Start – 通知搜索引擎,文档的开始
• Next – 记录文档的下一页.(浏览器可以提前加载此页)
• Prev – 记录文档的上一页.(定义浏览器的后退键)
• Contents - 文档的目录
• Index – 当前文档的索引
• Glossary – 词汇
• Copyright – 当前文档的版权
• Chapter – 当前文档的章节
• Section – 作为文档的一部分
• Subsection – 作为文档的一小部分
• Appendix – 定义文档的附加信息
• Help – 链接帮助信息
• Bookmark – 书签

Bootstrap实例1

①、代码实现**

    
     
     
         
   
  
    
    
     
我的第一个 Bootstrap 页面
    
     
重置窗口大小，查看响应式效果！
   
    
  
    
    
     
      
      
第一列
      
      
学的不仅是技术，更是梦想！
      
      
再牛逼的梦想,也抵不住你傻逼似的坚持！
    
     
    
     
      
      
第二列
      
      
学的不仅是技术，更是梦想！
      
      
再牛逼的梦想,也抵不住你傻逼似的坚持！
    
     
    
     
      
      
第三列
              
      
学的不仅是技术，更是梦想！
      
      
再牛逼的梦想,也抵不住你傻逼似的坚持！
    
     
  
    
   

②、bootstrap-3.3.7版本-效果图：

③、bootstrap-4.5.2版本-效果图：

Bootstrap栅栏布局里col-xs-、col-sm-、col-md-*、col-lg-*之间的区别及使用方法

• .col-xs-* 超小屏幕 手机 (<768px)
• .col-sm-* 小屏幕 平板 (≥768px)
• .col-md-* 中等屏幕 桌面显示器 (≥992px)
• .col-lg-* 大屏幕 大桌面显示器 (≥1200px)

关键字解释

• 1、col-column：列；
• 2、xs-maxsmall：超小； sm-small：小； md-medium：中等； lg-large：大；
• 3、-*表示占列，即占自动每行row分12列栅格系统比；

案例说明

   
   
    
    
        
     
      col-md-4
     
        
     
      col-md-4
     
        
     
      col-md-4
     
        
         
    
    
    
        
     
      col-md-4
     
        
     
      col-md-8
     
        
         
    
    
    
        
     
      col-md-3
     
        
     
      col-md-6
     
        
     
      col-md-3
     
        
         
    
   
   
   
    测试
   
   

转载地址：http://hqoi.baihongyu.com/