【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

riverrun_z

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量37

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124380619

版权

bootstrap 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<body>
    <div class="container">
         <!-- form-control的作用：加蓝边和蓝色阴影【变块/宽度变100%】
         form-control的使用对象：表单类控件
         form-lable 用来给标记标签添加margin-bottom=0.5rem的下外间距，加在label标签 -->
         <!-- label -->
         <label for="" class="form-label">请输入用户名</label>
        <input type="text "  placeholder="用户名" class="form-control">
        <label for="" class="form-label">请输入评论</label>
        <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
        <!-- 下拉菜单 -->
        <!-- 下面的aria-label="Default select example"是对标签的介绍，删掉也没关系 -->
        <!-- form-select的作用，让下拉菜单变成块级元素，宽度变为100% -->
        <!-- 
            拓展部分:
            打开bootstrap的css文件-搜索select-form的样式发现它的img是这样写的
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
      
          这个img的写法是用base64图写的
          怎么写base64图：搜索引擎搜索base64图-打开在线转换base64图网址-选文件-复制base64图的转换地址
        --> 
        <select class="form-select" aria-label="Default select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>

          <!-- 选框 -->
          <div class="form-check">
              <!-- 复选框 -->
              <input type="checkbox" id="in1" class="form-check-input">
              <!-- lable是用来提示旁边的表单标签的 要在要提示的表单标签写id才能知道label提示状态 -->
              <label for="in1" class="form-check-label">复选框</label>
          </div>
          <!-- 单选框 -->
          <div class="check-form">
              <input name="rd1" type="radio" class="form-check-input" id="in2">
              <label for="in2" class="form-check-label">单选框</label>
              <input name="rd1" type="radio" id="in3" class="form-check-input">
              <label for="in3" class="form-check-label">单选框2</label>
              <!-- 注意name要相同,单选框才能切换 -->
          </div>

          <!-- input组件 -->
          <div class="input-group ">
            <span class="input-group-text bg-primary text-light" >刘冉北京</span>
            <input type="text" class="form-control" placeholder="地址" >
          </div>
    </div>
</body>

效果

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

<body> <div class="container">   <label f
复制链接

扫一扫