Bootstrap从入门到界面（商城网站的前端界面）

1.Bootstrap 网格系统（Grid System）

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
  简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
  Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

基本的网格结构

   

      

      
      
   
   
...

....

Bootstrap的网格使用：http://www.mamicode.com/info-detail-591276.html

top

代码html：

    

        

            你好，欢迎光临红玫瑰商城！我的信息（2）![](Images/HMG_down_arrow.png)
        
        

            请登录| 注册 
            ![](Images/HMG_top_xing.png) 收藏夹 ![](Images/HMG_down_arrow.png)
            ![](Images/HMG_top_shop_car.png) 购物车 1 ![](Images/HMG_down_arrow.png)
            帮助中心
        


    

2 Bootstrap 输入框组

• 把前缀或后缀元素放在一个带有 class .input-group 的
  中。
• 接着，在相同的
  内，在 class 为 .input-group-addon 的 内放置额外的内容。
• 把该 放置在 元素的前面或者后面。
  样例代码：

    
    
      
    
    




    

        

            @
            
        
        

        

            
            .00
        
        

        

            $
            
            .00
        
    

公众号.png