前端路线--bootstrap（day01）

已于 2022-04-09 20:06:04 修改
阅读量766 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端
于 2022-04-07 20:47:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/124026144
版权

day01-01-bootstrap基础

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <p>段落01</p>
    <p>段落02</p>
    <p>段落03</p>

    <!-- h1-h6 可以做为标签来使用也可以做为类名来使用 -->
    <h1>Bootstrap 框架--字体大小是36px</h1>
    <div class="h1">Bootstrap</div>
    <span class="h1">Bootstrap</span>
    <h2>Bootstrap 框架--字体大小是30px <small>副标题</small></h2>
    <h3>Bootstrap 框架--字体大小是24px</h3>
    <h4>Bootstrap 框架--字体大小是18px</h4>
    <h5>Bootstrap 框架--字体大小是14px</h5>
    <h6>Bootstrap 框架--字体大小是12px</h6>
</body>

</html>

day01-02-内敛文本元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>字体倾斜</em>
    <i>字体倾斜</i>
    <del>删除线</del>
    <s>删除线标签</s>
    <ins>插入标签</ins>
    <u>下划线</u>

    <span>正常的</span>
    <small>小的</small>
    <mark>标记标签</mark>

</body>

</html>

day01-03-对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <p class="text-left">左对齐</p>
    <p class="text-right">右对齐</p>
    <p class="text-center">居中对齐</p>
    <p class="text-justify">疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</p>


    <p class="text-nowrap">疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</p>

    <p style="white-space: nowrap;">疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</p>

</body>

</html>

day01-04-大小写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/bootstrap.css"> -->
    <style>
        .text-uppercase {
            text-transform: uppercase;
        }

        .text-lowercase {
            text-transform: lowercase;
        }

        .text-capitalize {
            text-transform: capitalize;
        }
    </style>
</head>

<body>
    <p class="text-uppercase">welcome come to shanghai</p>
    <p class="text-lowercase">welcome COME TO shanghai</p>
    <p class="text-capitalize">welcome come to shanghai</p>

    <!-- 缩略语 -->
    Bootstrap<abbr title="Bootstrap">框架</abbr>
</body>

</html>

day01-05-排版样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">

</head>

<body>
    <address>
        <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>


    <blockquote>
        引用
    </blockquote>
    <blockquote class="blockquote-reverse">
        反向引用
    </blockquote>
    <!-- list-unstyled 移除默认的小圆点 -->
    <ul class="list-unstyled">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <!-- list-inline 将li设置称为行内块 -->
    <ul class="list-inline">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <dl class="dl-horizontal">
        <dt>Bootstrap</dt>
        <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
    </dl>
    <dl>
        <dt>Bootstrap</dt>
        <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
    </dl>

    <!-- 网页中嵌入代码 -->
    <code>&lt;div&gt;</code>

    <!-- 用户输入 -->
    <kbd>ctrl+s</kbd>

    <pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

</body>

</html>

day01-06-表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">

</head>
<!-- table-responsive响应式的表格，浏览器窗口宽度小于768的时候出现边框 -->

<body class="table-responsive">
    <!-- table 定义基础表格的类名 
         table-bordered  定义表格边框的
         table-striped  斑马条纹表格
         table-hover   鼠标悬停的效果
    -->
    <table class="table table-striped table-hover">
        <tr>
            <th>课程名称</th>
            <th>学员姓名</th>
            <th>操作</th>
        </tr>
        <!-- success 成功绿 -->
        <tr class="success">
            <td>HTML+CSS</td>
            <td>二哥</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <!-- info 信息蓝 -->
        <tr class="info">
            <td>HTML5+CSS3</td>
            <td>二哥</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <!-- warning 警告黄 -->
        <tr class="warning">
            <td>JavaScript</td>
            <td>二哥</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <!-- danger 危险红 -->
        <!-- sr-only 隐藏该行不显示 -->
        <tr class="danger sr-only">
            <td>jQuery</td>
            <td>二哥</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <!-- active 相当于鼠标悬停 -->
        <tr class="active">
            <td>jQuery</td>
            <td>二哥</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</body>

</html>

day01-07-按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <button class="btn btn-default">普通按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-info">信息按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-link">链接按钮</button>

    <a href="" class="btn btn-success" role="button">成功</a>
    <input type="button" class="btn btn-danger" value="危险按钮">

    <!-- 定义按钮的大小 -->

    <div>
        <button class="btn btn-success btn-lg">大的按钮btn-lg</button>
        <button class="btn btn-success">正常大小的按钮</button>
        <button class="btn btn-success btn-sm">小的按钮btn-sm</button>
        <button class="btn btn-success btn-xs">超小的按钮btn-xs</button>
    </div>
    <div>
        <button class="btn btn-success btn-block">自适应屏幕宽度btn-block</button>
    </div>
    <div>
        <!-- active 按钮激活状态 -->
        <button class="btn btn-primary active">按钮激活状态</button>
        <button class="btn btn-primary disabled">按钮禁用状态</button>
    </div>
</body>

</html>

day01-08-表单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .login {
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="login">
        <!-- form-inline 给form标签添加，定义内联表单 -->
        <!-- form-block  给form标签添加，定义垂直表单 -->
        <form action="" class="form-block">
            <div class="form-group">
                <label for="">用户名</label>
                <input type="text" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" class="form-control" placeholder="密码">
            </div>
            <div class="form-group input-group">
                <input type="text" class="form-control">
                <div class="input-group-addon">
                    ###
                </div>
            </div>
            <div class="form-group input-group">
                <div class="input-group-addon">
                    <input type="checkbox">
                </div>
                <input type="text" class="form-control">
                <div class="input-group-addon">
                    ###
                </div>
            </div>
            <div class="form-group input-group">
                <div class="input-group-addon">
                    <input type="checkbox">
                </div>
                <input type="text" class="form-control">
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">敲代码
                    </label>
                    <label>
                        <input type="checkbox">打豆豆
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="radio">
                    <label>
                        <input type="radio" name="sex">男
                    </label>
                    <label>
                        <input type="radio" name="sex">女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <select name="" id="" class="form-control">
                    <option value="">郑州</option>
                    <option value="">杭州</option>
                    <option value="">广州</option>
                    <option value="">其他</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block">登录</button>
            </div>
        </form>


    </div>


</body>

</html>

day01-09-表单-登录

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-1.7.2.min.js"></script>
    <style>
        .login {
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="login">
        <form action="">
            <div class="form-group" style="position: relative;">
                <input type="text" id="username" required name="username" class="form-control input-lg"
                    autocomplete="off" placeholder="手机号/邮箱">
                <span class="glyphicon glyphicon-ok form-control-feedback hide"></span>
                <span class="glyphicon glyphicon-remove form-control-feedback hide" style="top:6px"></span>
            </div>
            <div class="form-group" style="position: relative;">
                <input type="password" id="password" required name="password" class="form-control input-lg"
                    placeholder="密码">
                <span class="glyphicon glyphicon-ok form-control-feedback hide"></span>
                <span class="glyphicon glyphicon-remove form-control-feedback hide" style="top:6px"></span>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block btn-lg" id="login">登录</button>
            </div>
        </form>
    </div>
    <script>
        // 正则验证手机号
        // 13673618137
        // 373289962@qq.com
        // baqibubaqi@163.com
        // henbaqi018@163.com

        // [0-9]  //匹配数字
        // [a-z]  //匹配小写字母
        // [A-Z]  //匹配大写字母
        // ?   量词  表示匹配0个或者1个
        // +   量词  表示匹配至少1个
        // *   量词  表示匹配0个或者任意多个
        // ^1  匹配1开头的   ^[A-Z] 大写字母开头
        // $0  匹配0结尾的   $[a-z] 小写字母结尾
        // {m,n} 表示最少匹配m个，最多n个   

        var regPhone = /^1[358][0-9]{9}$/
        var regEmail = /^[0-9a-zA-Z_]{6,20}@[0-9a-zA-Z]+\.[a-zA-Z]{2,6}$/
        var regPassword = /^[A-Z][0-9a-zA-Z]{5,19}$/

        // 失去焦点验证用户名
        $("#username").blur(function () {
            // console.log($(this).val());
            var username = $(this).val() //用一个变量接收输入的值
            var isUsername = regPhone.test(username) //用正则.test(输入的值)方法来验证输入的值是否和正则匹配
            var isEmail = regEmail.test(username)
            console.log(isUsername);
            console.log(isEmail);

            if (isUsername || isEmail) {
                $(this).parent().removeClass("has-error")
                $(this).parent().addClass("has-success")

                $(this).parent().find(".glyphicon-ok").removeClass("hide")
                $(this).parent().find(".glyphicon-remove").addClass("hide")
            } else {
                $(this).parent().removeClass("has-success")
                $(this).parent().addClass("has-error")
                $(this).parent().find(".glyphicon-ok").addClass("hide")
                $(this).parent().find(".glyphicon-remove").removeClass("hide")
            }
        })

        $("#password").blur(function () {
            if (regPassword.test($("#password").val())) {
                $(this).parent().removeClass("has-error")
                $(this).parent().addClass("has-success")

                $(this).parent().find(".glyphicon-ok").removeClass("hide")
                $(this).parent().find(".glyphicon-remove").addClass("hide")
            } else {
                $(this).parent().removeClass("has-success")
                $(this).parent().addClass("has-error")
                $(this).parent().find(".glyphicon-ok").addClass("hide")
                $(this).parent().find(".glyphicon-remove").removeClass("hide")
            }
        })
    </script>
</body>

</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap---day01
蜗牛的博客
08-24 328
bootstrap是当下最时兴的前端框架（也可以说是 界面工具集）具有移动端优先的设计理念特点就是灵活简洁，代码优雅，美观大方其目的是为了让web开发更敏捷学习bootstrap的第一天，总的来说，学习到了一些bootstrap中常用的插件、布局和使用bootstrap的方式方法。在之后的项目开发中，会对各种类名更加熟练，提升开发速度。
Bootstrap3 行内文本样式
歪脖先生的博客
05-03 863
行内文本 行内文本主要包括打标记的文本、被删除的文本、不再准确的文本、插入的文本、带下划线的文本、小号文本、粗体文本、斜体文本，Bootstrap 会为这些文本添加特殊的样式。 1．打标记的文本 HTML中的 <mark> 标签用来为文本打上标记，通常是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。如： <p> You can use t...
web---HTML基础知识
Allure泽宇的博客
06-11 5490
HTML基础知识内容总结
html头部中各式各样的meta
weixin_30668887的博客
06-05 222
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
HTML编码问题导致的乱码
Alex
09-01 1362
今天一个学弟问了一个问题，它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹，打开一看，很简单的代码。 <!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
Day-Bootstrap-Template-Test
02-18
标题 "Day-Bootstrap-Template-Test" 暗示我们正在处理一个基于Bootstrap框架的网页模板测试项目。Bootstrap是目前最流行的前端开发框架之一，它提供了丰富的预设样式、组件和JavaScript插件，用于快速构建响应式和...
day05-bootStrap.zip
07-25
Bootstrap是世界上最受欢迎的前端开发框架之一，用于快速构建响应式、移动优先的网站。这个"day05-bootStrap.zip"文件显然包含了使用Bootstrap构建一个简单网页商城的资源。让我们详细了解一下Bootstrap及其在创建...
bootstrap-day-1
04-08
在这个“bootstrap-day-1”的学习资料中，我们将深入探讨Bootstrap的基础知识，帮助你开启高效网页设计的旅程。 首先，让我们了解HTML（HyperText Markup Language）的基本概念。HTML是构建网页内容的基础语言，它...
前端 Bootstrap 代码
03-31
这个压缩包文件集合显然包含了一系列关于学习和使用Bootstrap的教程或代码示例，可能是一个逐步指导课程的材料，从基础到进阶，按照天数（day01至day06）进行组织。 首先，让我们深入理解Bootstrap的核心概念： 1....
day01-HTML附件
最新发布
07-23
9. **框架与库**: 在实际开发中，常常会使用Bootstrap、Foundation等前端框架，它们提供预设的CSS样式和JavaScript组件，简化开发过程。jQuery等JavaScript库则简化了DOM操作和事件处理。 10. **调试与验证**: 使用...
[bootstrap] 修改字体
weixin_30621919的博客
06-08 202
file: variable.less @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; 改为： @font-family-sans-serif: Microsoft YaHei,Verdana,sans-serif,"宋体"; 　　 转载于:https://www.cnblogs...
bootstrap当中，实现一些常用的元素居中
热门推荐
博客 小站
05-07 10万+
在 bootstrap当中，实现居中，咱们可以大体分3类： 文本内容居中：利用bootstrap自带CSS样式表当中 的   text-center 样式来实现。          代码实现 注意，此处引用了 <% String path = request.getContextPath(); String basePath = request.getSch
Bootstrap（三）
qq_43278421的博客
06-02 481
接下来学习bootstrap的样式设计 bootstrap的排版 标题，页面主题，强调，缩略语，地址，引用，列表，描述，代码 bootstrap的默认字体大小为14px，行高为20px，并且这些书信会直接赋予 body 中的元素和所有段落元素。 p 元素还被设置了0.5倍行高（10px）的底部外边距，通过添加.lead类也可以让段落突出显示 对于需要强调的元素，框架 ...
页面变小时控制span4大小和div下面的所有span的字体大小
qq_38114464的博客
03-09 1051
//页面变小时控制span4大小和div下面的所有span的字体大小 if($("#Info2").width()&lt;149){ $(".span4").css("width","11%") $(".span4").css("margin-right", "9px"); va...
bootstrap 字体太大怎么办
festone000的专栏
08-21 1693
问题 用了一下bootstrap随便写了个页面，总感觉字很大不适应，感觉怪怪的。 如下图（我没有缩放，完全1:1截图的） 背景 经查看代码发现，原来bootstrap(我用的是4.5版本了，如下) bootstrap@4.5.0/dist/css/bootstrap.min.css 的字体不是用px定义的，而是用 rem定义的。 如下图： 办法 办法很简单，全局处理一下就行了。 我这里写了0.8rem，你用px或者其他单位定义也行。 效果 看看是不是和谐多了。 (没有缩放，1:1直接截图) ...
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 608
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
HTML捋一捋，简介 <！doctype html>,head 标签介绍
weixin_30525825的博客
10-01 1922
1 HTML文件是什么 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题） 网页文件的扩展名：.html或.htm 2 HTML文件的作用 　　HTML语言写好的文件是给浏览器读...
Bootstrap_02_全局CSS之排版、代码、表格
m0_60837612的博客
05-03 1009
Bootstrap_02_全局CSS之排版、代码、表格
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值