Web前端 — Bootstrap（4）

最新推荐文章于 2022-04-30 17:19:23 发布

Roger_CoderLife

最新推荐文章于 2022-04-30 17:19:23 发布

阅读量504

点赞数

分类专栏： WEB - Bootstrap

本文链接：https://blog.csdn.net/Roger_CoderLife/article/details/80408366

版权

WEB - Bootstrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Bootstrap本次知识点

1.栅格系统

2.表单

1.栅格系统

（1）响应式网格系统随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。

（2）工作原理：

<1>行必须放置在.container（固定宽度）或者.container-fluid（100%宽度）class内，获得适当的对齐（alignment）和内边距。

<2>内容放置在列中，唯有列可以是行的直接子元素。

<3>预定义的网格类，比如.row或者.col-lg-4，可以快速于创建网格布局。

<4>列通过内边距（padding）来创建列内容之间的间隙。

（3）媒体查询

/* 超小设备（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小型设备（平板电脑，大于等于768px） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* 中型设备（台式电脑，大于等于992px） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

 /* 大型设备（大台式电脑，大于等于1200px） */
 @media (min-width: @screen-lg-min) { ... }

（4）栅格参数

（5）四种屏幕分类全部激活

<div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            ....
        </div>
   </div>
     //可以设置列偏移，让中间保持空隙
   <div class="container">
        <div class="row">
            <div class="col-md-8">1-8</div>
            <div class="col-md-3 col-md-offset-1">10-12</div>
        </div>
   </div>
     //可以嵌套，嵌满也是 12 列
   <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="col-md-8">1-8</div>
                <div class="col-md-4">9-12</div>
            </div>
            <div class="col-md-3"> 10-12 </div>
        </div>
   </div>
     //可以把两个列交换位置，push 向右移动（推），pull 向左移动（拉）
   <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-push-4">8</div>
            <div class="col-md-4 col-md-pull-8">4</div>
        </div>
   </div>

2.表单

（1）垂直或基本表单

<div class="container">
    <form action="">
        <div class="form-group">
            <label for="textname" class="control-label col-md-4">
                姓名：
            </label>
            <div class="col-md-6">
                <input type="text" class="form-control" id="textname" placeholder="请输入姓名"/>
            </div>
            <div class="col-md-2">
                <label for="" class="form-control-static">help</label>
            </div>
        </div>
        <div class="form-group">
            <label for="textpass" class="control-label col-md-4">
                密码：
            </label>
            <div class="col-md-6">
                <input type="password" class="form-control" id="textpass" placeholder="请输入密码"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8 col-md-offset-2">
                <button class="btn btn-default" type="submit">提交</button>
                <button class="btn btn-default" type="reset">重置</button>
            </div>
        </div>       
    </form>
</div>

（2）内联表单

//让表单左对齐浮动，并表现为 inline-block 内联块结构
      <form class="form-inline">
//注：当小于 768px，会恢复独占样式

（3）水平表单

让表单内的元素保持水平排列。

<div class="container">
    <form action="">
        <div class=" checkbox-inline">
            <label for="">
                <input type="checkbox"/>音乐
            </label>
        </div>
        <div class=" checkbox-inline">
            <label for="">
                <input type="checkbox"/>爬山
            </label>
        </div>
        <div class=" checkbox-inline">
            <label for="">
                <input type="checkbox"/>唱歌
            </label>
        </div>
        <div class="radio-inline">
            <label for="rad-n">
                <input type="radio" id="rad-n" value="男" name="sex"/>男
            </label>
        </div>
        <div class="radio-inline">
            <label for="rad-v">
                <input type="radio" id="rad-v" value="女" name="sex" disabled/>女
            </label>
        </div>
    </form>
</div>

（4）表单组合

      //前后增加片段
      <div class="input-group">
         <div class="input-group-addon">￥</div>
         <input type="text" class="form-control">
         <div class="input-group-addon">.00</div>
      </div>

（5）输入框、文本域

原生的HTML的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、 search、tel和color。

<input type="text" class="form-control" placeholder="文本输入">
<textarea class="form-control" rows="3"></textarea>

（6）复选框（ Checkbox）和单选框（Radio）

      <div class="checkbox">
         <label><input type="checkbox" value="">选项 1</label>
      </div>
      <div class="radio">
         <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1"
               value="option1" checked> 选项 1
         </label>
      </div>

内联的复选框和单选框

<label class="checkbox-inline">
         <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
      </label>
      <label class="radio-inline">
         <input type="radio" id="optionsRadiosinline" value="option1"> 选项 1
</label>

（7）选择框（multiple）多行显示

<select class="form-control" multiple>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
</select>

（8）静态控件 .form-control-static

<form action="">
    <div class="form-group has-error">
        <label for="textname1" class="control-label col-md-2">
            姓名：
        </label>
        <div class="col-md-6">
            <input type="text" class="form-control" id="textname1" placeholder="请输入姓名"/>
        </div>
        <div class="col-md-4">
            <label for="" class="form-control-static">help</label>
        </div>
    </div>
    <div class="form-group has-success">
        <label for="textpass2" class="control-label col-md-2">
            密码：
        </label>
        <div class="col-md-6">
            <input type="password" class="form-control" id="textpass2" placeholder="请输入密码"/>
        </div>
    </div>
    <div class="form-group has-warning">
        <label for="textname1" class="control-label col-md-2">
            姓名：
        </label>
        <div class="col-md-6">
            <input type="text" class="form-control input-sm" id="textname2" placeholder="请输入姓名"/>
        </div>
        <div class="col-md-10">
            <label for="" class="form-control-static">help</label>
        </div>
    </div>
</form>

（9）表单控件状态

<1>输入框焦点。

<2>当输入框input接收到： focus时，输入框的轮廓会被移除，同时应用box-shadow。

<3>禁用的输入框：input。

<4> 如果你想要一个禁用的输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

<5>禁用的字段集fieldset。

<6>对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件。

<7>校验状态。

<8>.has-warning、.has-error或.has-success类到这些控件的父元素即可。

<9>任何包含在此元素内的.control-label、.form-control和.help-block元素都将接受这些校验状态的样式。

（10）表单帮助文本

<form role="form">
     <input class="form-control" type="text" placeholder="">
     <span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
 </form>

（11）控件尺寸

.input-lg和col-lg-*来设置表单的高度和宽度。

<div class="form-group">
     <input class="form-control input-lg" type="text" placeholder="input-lg">
</div>
<div class="row">
    <div class="col-lg-2">
       <input type="text" class="form-control" placeholder="col-lg-2">
    </div>
    <div class="col-lg-3">
        <input type="text" class="form-control" placeholder="col-lg-3">
    </div>
    <div class="col-lg-4">
        <input type="text" class="form-control" placeholder="col-lg-4">
     </div>
</div>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80408336

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！

Roger_CoderLife

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端 — Bootstrap（4）

Bootstrap本次知识点1.栅格系统2.表单1.栅格系统（1）响应式网格系统随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。（2）工作原理： <1>行必须放置在.container（固定宽度）或者.container-fluid（100%宽度）class内，获得适当的对齐（alignment）和内边距。...
复制链接

扫一扫