Bootstrap框架

 

 一、简介

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  增加背景颜色
复制代码
复制代码

实际效果图如下：

增加颜色后的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>
复制代码
复制代码

 

实际效果图：

表单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>
复制代码
复制代码

实际效果图如：

六、按钮

为 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>

复制代码
复制代码

效果图：

 

posted @   Heroes13  阅读(282)  评论(0)  编辑  收藏  举报
相关博文：
· vue入门
· js数组方法
· Bootstrap框架
· 06 前端之Bootstrap框架
· 前端之Bootstrap框架
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛