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

╰半橙微兮° 2021-06-24 16:11 317阅读 0赞

### 1.Bootstrap 网格系统（Grid System） ###

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

##### 基本的网格结构 #####

<div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>
    <div class="container">....

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

![2789632-b07662519e32553a.png][]

top

代码html：

<div class="top">
    <div class="container top_box">
        <div class="Row">
            <div class="col-lg-4">
                你好，欢迎光临<span class="color_red">红玫瑰</span>商城！<span class="label_my_info">我的信息（2）</span>![](Images/HMG_down_arrow.png)
            </div>
            <div class="col-lg-4 col-lg-offset-4">
                请<span class="color_red">登录</span>|<span class="color_red"> 注册 </span>
                ![](Images/HMG_top_xing.png) 收藏夹 ![](Images/HMG_down_arrow.png)
                ![](Images/HMG_top_shop_car.png) 购物车 <span class="color_red" style="font-weight: 900;">1</span> ![](Images/HMG_down_arrow.png)
                <span class="help_center">帮助中心</span>
            </div>
    
    
        </div>
    </div>
    </div>

### 2 Bootstrap 输入框组 ###

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

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 基本的输入框组</title>
        <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="twitterhandle">
            </div>
            <br>
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
        </form>
    </div>
    
    </body>
    </html>

![2789632-8bbb041c24c31b35.png][]

![2789632-3b18269684ea9294.png][]

公众号.png

[http_www.mamicode.com_info-detail-591276.html]: http://www.mamicode.com/info-detail-591276.html
[2789632-b07662519e32553a.png]: /images/20210615/b6d00a846a70490cba6a113ba84cd760.png
[2789632-8bbb041c24c31b35.png]: /images/20210615/b3d8e7a67c034b859317ae5523254541.png
[2789632-3b18269684ea9294.png]: /images/20210615/68c2ac127f13474388815ac7fcc603b2.png