Web前端 — Bootstrap(4)

简介:

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的原创文章,著作权归作者所有,转载请注明原文出处,欢迎转载!

相关文章
|
25天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
7天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
6天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
13 2
|
9天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
9天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
24天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
30 11
|
17天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
24天前
|
前端开发
|
24天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
24天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`&lt;li&gt;`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
下一篇
无影云桌面