bootstrap 三层架构实现 bootstrap框架原理

转载

mob64ca13ff5b03 2023-08-18 13:49:31

文章标签 bootstrap 三层架构实现 bootstrap 表单 css 文章分类 架构后端开发

一、简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
该框架是很多前端框架的鼻祖学会它几乎可以熟悉很多框架的原理

二、引入方式

地址：https://v3.bootcss.com/

bootstrap需要依赖于jQuery才能正常执行(动态效果)

第一次使用该框架的时候最好采用本地导入的方式

本地引入(最完整的)

　　1.引入jQuery

2.引入bootstrap的css文件

3.引入bootstrap的js文件

CDN引入

　　1.引入jQuery CDN

　　2.引入bootstrap css的 CDN

3.引入bootstrap js的 CDN 导入到HTML文件中的<head>即可

三：栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，即响应式布局。
该系统能够自动监测浏览器窗口大小，从而根据大小来进行变化。

参数及使用：

row      行  # 一个row就是一行 一行是固定的12份
col-md-1    占几份
col-sm-1    占几份
col-xs-1    占几份
col-lg-1    占几份

四、列偏移

列偏移：就是将任意份数的一行，进行向左或向右移动的操作。

col-md-offset-3 向右移动3份

五、表格与表单

编写一个表格，如下代码。

<div class="container">
        <div class="row">
            // 向右移动3份，居中
            <div class="col-md-6 col-md-offset-3">
                // 文本直接text-center即可。
                <h2 class="text-center">用户数据表单</h2>
                // 添加表格的样式，用着三个即可。
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>王五</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

使用框架调整页面样式一般都是操作标签的class属性。
即table中的class，添加了多种样式。
class = "table"
table-hover  悬浮
table-bordered  增加边框
table-striped  增加背景颜色

实际效果图如下：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现

增加颜色后的body代码如下：

<body>
    <div class="container">
        <div class="row">
<!--            向右移动3份，居中-->
            <div class="col-md-6 col-md-offset-3">
<!--                文本直接text-center即可。-->
                <h2 class="text-center">用户数据表单</h2>
<!--                添加表格的样式，用着三个即可。-->
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr class="active">
                            <th>ID</th>
                            <th>Name</th>
                            <th>class="active"</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="success">
                            <td>1</td>
                            <td>张三</td>
                            <td>class="success"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="info">
                            <td>2</td>
                            <td>李四</td>
                            <td>class="info"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="warning">
                            <td>3</td>
                            <td>王五</td>
                            <td>class="warning"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="danger">
                            <td>4</td>
                            <td>赵六</td>
                            <td>class="danger"</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

实际效果图：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现_02

表单form

在form表单的优化页面中，只需记住下面一行代码即可

<input type="text" class="form-control"  disabled>
form-control 优化页面
disbaled 禁止其与用户有任何交互

input输入框内阴影提示：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

实际效果图如：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap_03

六、按钮

为 a、button 或 input 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
想让谁变成按钮，就在他标签内添加class = "btn" 即可

代码：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

效果图：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现_04

二、引入方式

地址：https://v3.bootcss.com/

bootstrap需要依赖于jQuery才能正常执行(动态效果)

第一次使用该框架的时候最好采用本地导入的方式

本地引入(最完整的)

　　1.引入jQuery

2.引入bootstrap的css文件

3.引入bootstrap的js文件

CDN引入

　　1.引入jQuery CDN

　　2.引入bootstrap css的 CDN

3.引入bootstrap js的 CDN 导入到HTML文件中的<head>即可

三：栅格系统

参数及使用：

row      行  # 一个row就是一行 一行是固定的12份
col-md-1    占几份
col-sm-1    占几份
col-xs-1    占几份
col-lg-1    占几份

四、列偏移

列偏移：就是将任意份数的一行，进行向左或向右移动的操作。

col-md-offset-3 向右移动3份

五、表格与表单

编写一个表格，如下代码。

<div class="container">
        <div class="row">
            // 向右移动3份，居中
            <div class="col-md-6 col-md-offset-3">
                // 文本直接text-center即可。
                <h2 class="text-center">用户数据表单</h2>
                // 添加表格的样式，用着三个即可。
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>王五</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

使用框架调整页面样式一般都是操作标签的class属性。
即table中的class，添加了多种样式。
class = "table"
table-hover  悬浮
table-bordered  增加边框
table-striped  增加背景颜色

实际效果图如下：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现

增加颜色后的body代码如下：

<body>
    <div class="container">
        <div class="row">
<!--            向右移动3份，居中-->
            <div class="col-md-6 col-md-offset-3">
<!--                文本直接text-center即可。-->
                <h2 class="text-center">用户数据表单</h2>
<!--                添加表格的样式，用着三个即可。-->
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr class="active">
                            <th>ID</th>
                            <th>Name</th>
                            <th>class="active"</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="success">
                            <td>1</td>
                            <td>张三</td>
                            <td>class="success"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="info">
                            <td>2</td>
                            <td>李四</td>
                            <td>class="info"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="warning">
                            <td>3</td>
                            <td>王五</td>
                            <td>class="warning"</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr class="danger">
                            <td>4</td>
                            <td>赵六</td>
                            <td>class="danger"</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

bootstrap 三层架构实现 bootstrap框架原理_表单_06

实际效果图：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现_02

表单form

在form表单的优化页面中，只需记住下面一行代码即可

<input type="text" class="form-control"  disabled>
form-control 优化页面
disbaled 禁止其与用户有任何交互

input输入框内阴影提示：

bootstrap 三层架构实现 bootstrap框架原理_表单_06

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

bootstrap 三层架构实现 bootstrap框架原理_表单_06

实际效果图如：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap_03

六、按钮

为 a、button 或 input 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
想让谁变成按钮，就在他标签内添加class = "btn" 即可

代码：

bootstrap 三层架构实现 bootstrap框架原理_表单_06

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

bootstrap 三层架构实现 bootstrap框架原理_表单_06

效果图：

bootstrap 三层架构实现 bootstrap框架原理_bootstrap 三层架构实现_04

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。