首页
学习
活动
专区
圈层
工具
发布

BootStrap应用开发学习入门

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它是一个简洁、直观、强悍的前端开发框架,可以让web开发更迅速、简单。 BootStrap有什么作用和特点?...、背景的基本结构 CSS样式: BS中已经定义好了一套CSS的样式表 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果...,且可以将小写字母转换为大写字母 .pre-scrollable: 使 元素可滚动,代码块区域最大高度为340px 一旦超出这个高度,就会在Y轴出现滚动条 /**列表**/ .list-unstyled...嵌套列 描述:为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md- 列内添加一组 .col-md- 列; 简单的说就是相对于父元素可以,再次对行进行等分或者不等分,相对于父元素十二份...Table 表格 描述:提供了一个清晰的创建表格的布局; 表格类BS样式: .table-responsive #任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备

19.3K20

BootStrap应用开发学习入门

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它是一个简洁、直观、强悍的前端开发框架,可以让web开发更迅速、简单。 BootStrap有什么作用和特点?...、背景的基本结构 CSS样式: BS中已经定义好了一套CSS的样式表 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果...,且可以将小写字母转换为大写字母 .pre-scrollable: 使 元素可滚动,代码块区域最大高度为340px 一旦超出这个高度,就会在Y轴出现滚动条 /**列表**/ .list-unstyled...嵌套列 描述:为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md- 列内添加一组 .col-md- 列; 简单的说就是相对于父元素可以,再次对行进行等分或者不等分,相对于父元素十二份...Table 表格 描述:提供了一个清晰的创建表格的布局; 表格类BS样式: .table-responsive #任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备

16.2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    动手练一练,手写一个价格对比、固定表头滚动的表格

    一、实践一个功能价格对比的表格案例 功能对比是一个很常用的功能,尤其是当网站服务越来越多时,就需要一个类似的功能,让用户能够直观的感受到各种服务的差异,帮助用户选择适合自己的方案。...今天我们将通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示如视频所示,当滚动条滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。...获取用户从视口顶部滚动的距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部的高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。...如果滚动到表格区域,获取重置后的表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部的高度是否大于表头的高度。

    3.7K31

    HTML5 与CSS3 相关笔记

    (1)B:first-child 作为父元素的第一个子元素B,作用和(3)相似; (2)B:last-child作为父元素的最后一个子元素B; (3)A B:nth-child(n) 在父级中查第n...4、:表格的头部的一个单元格,表格表头,文本默认粗体且居中显示。 5、:表格的一个单元格,一行中包含几对这行中就有几个单元格。 6、表格中列的个数,取决于一行中数据单元格的个数。...层模型有三种形式: (1)绝对定位(position: absolute) 将元素从文档流中拖出来,然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位...">播放该视频 HTML中如何键入空格?...i:first-child{ } 匹配所有元素的第一个 子元素 p:first-child i{ } 匹配第一个元素中的所有 元素 White-space属性:设置如何处理元素内的空白

    6.4K30

    BootStrap基础知识

    flex-fill 类强制设置各个弹性子元素的宽度是一样的 flex-grow-1 用于设置子元素使用剩下的空间,以下实例中前面两个子元素只设置了它们所需要的空间,最后一个获取剩余空间。...Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。 可以通过在 元素 中添加 .jumbotron 类来创建 jumbotron。...它适用于一系列图片、文本或自定义的标记,并包括对上一个 /下一个控制项和指示器的支援。...可以在 标签中使用 dropdown-divider 类用于在下拉式功能表中创建一个水平的分割线 dropdown-header 类用于在下拉式功能表中添加标题 active 类会让下拉式功能表的选项高亮显示...然后添加 data-target 属性,它的值为巡览列的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

    1.9K10

    前端面试题2(CSS)

    前端面试之CSS ---- display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失...,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见 display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成...:checked 单选框或复选框被选中 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局 经常遇到的浏览器的JS兼容性有哪些?解决方法是什么?...absolute; top:50%; /*父元素高度50%*/ margin-top: -150px; /*自身高度一半*/ } 未知高度的块级父子元素居中,模拟表格布局 缺点:IE67不兼容

    3.3K11

    知识整理之CSS篇

    如对HTML知识点感兴趣,可移步至:知识整理之HTML篇 CSS Hack CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。...BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。...可能原因: 使用import方法导入样式表 将样式表放在页面底部 有几个样式表,放在html结构的不同位置 原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。...工作原理 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象) 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 如何清除浮动 1....给浮动元素的父元素添加高度(扩展性不好) 如果一个元素要浮动,那么它的父元素一定要有高度。高度的盒子,才能关住浮动。

    2K20

    LayUI之旅-数据表格

    自动渲染 HTML配置,自动渲染 无需写过多 JS,可专注于 HTML 表头部分 转换静态表格 转化一段已有的表格元素 无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可 注:和官方一样...table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。...值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 中的 id 参数中获取。...table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。...值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 中的 id 参数中获取。

    5.1K30

    web前端必备英语词汇都在这儿了,客官你了解多少?

    黑色 bottom 底部,是一个CSS 属性 blink 闪烁 box 盒子 block 块 br 换行标记 blue 蓝色 bug 软件程序中的错误 body 主体,一个HTML 标记...内部高度 innerWidth 内部宽度 in 从0开始加速的缓动 inOut 前半段从0开始加速,后半段减速到0的缓动 infinity 无线循环 insertBefore 插入到某元素前 image...获取已知节点的父节点 previousSibling 返回上一个兄弟节点 previousElementSibling 返回上一个兄弟元素 password 密码 position 位置 prepend...设置属性 scrollHeight 获取文档整体高度 scrollTop 获取文档滚动高度 scrollLeft 元素左边界 setAttribute 设置节点上的属性 submit 提交 scroll...tr 表格中“行”的HTML 标记 thick 粗的 transitional 过渡的 thin 细的 two 两个 three 三个 type

    3.4K20

    JavaScript--DOM总结

    设置滚动条的底色 scrollbarDarkShadowColor 设置箭头和滚动条右侧和底边的颜色 scrollbarFaceColor 设置滚动条的表色 scrollbarHighlightColor...属性 属性 描述 borderCollapse 设置表格边框是否合并为单边框,或者像在标准的HTML中那样分离。...rows 返回包含表格中所有行的一个数组。可通过length获取到当前表格的数量 tBodies 返回包含表格中所有 tbody 的一个数组。...createTHead() 在表格中创建一个空的 tHead 元素。 deleteCaption() 从表格删除 caption 元素以及其内容。 deleteRow() 从表格删除一行。...deleteTFoot() 从表格删除 tFoot 元素及其内容。 deleteTHead() 从表格删除 tHead 元素及其内容。 insertRow() 在表格中插入一个新行。

    96710

    「资深前端工程师总结」前端面试知识点大全—CSS篇

    Painting:将layout后的节点内容呈现在屏幕上; 遇到外部的css文件和图片,浏览器会另外发出一个请求,来获取css文件和相应的图片,这个请求是异步的,并不会影响html文件。...(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)...22、元素竖向的百分比设定是相对于容器的高度吗? PS:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的。...后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。...40、像素渲染流水线 1)下载HTML文档 2)解析HTML文档,生成DOM 3)下载文档中引用的CSS、JS 4)解析CSS样式表,生成CSSOM 5)将JS代码交给JS引擎执行 6)合并DOM和CSSOM

    1.8K30

    OEA 中 WPF 树型表格虚拟化设计方案

    * 从 VirtualizingPanel 继承出一个子类,并让这个新的 Panel(以下称为 UIVPanel) 实现 IScrollInfo。...如果这个值有所变化,则应该调用 ScrollOwner.InvalidateScrollInfo 通知 ScrollOwner 来重新获取最新的总高度,以计算出滚动条最新的大小。    ...它中有两个属性:Index 及 Offset,它们的意义可以从 IndexFromGeneratorPosition 方法中理解出来:     Index 如果大于等于 0 时,则表示一个生成好的项容器在所有已经生成好的项容器中的索引...为了使用最外层 ScrollViewer 中的滚动条信息,它通过可视树往上查找到 DataGridRowsPresenter 来获取水平方向上的滚动条位置 HorizontalOffset,而通过这个值...而表格行 TreeGridRow 类则继承自 HeaderedItemsControl 类型,它的总行高应该是本行的高度加上所有子行的高度,也不是一个定值,所以现在虚拟化功能也被关闭。

    3.2K70

    50道 CSS 经典面试题(包含答案)

    6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...它的containing block一律为根元素(html/body) 16 CSS里的visibility属性有个collapse属性值?...当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。 chrome中,使用collapse值和使用hidden没有区别。...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE

    1.2K30

    50道CSS基础面试题

    6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...它的containing block一律为根元素(html/body) 16 CSS里的visibility属性有个collapse属性值?...当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。 chrome中,使用collapse值和使用hidden没有区别。...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE

    1.7K50

    50道CSS面试题(附答案)

    6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...它的containing block一律为根元素(html/body) 16 CSS里的visibility属性有个collapse属性值?...当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。 chrome中,使用collapse值和使用hidden没有区别。...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE

    1.8K30

    前端硬核面试专题之 CSS 55 问

    清除浮动的方式 父级 div 定义 height,原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。...结尾处加空 div 标签 clear: both,原理:添加一个空 div,利用 css 提高的 clear: both 清除浮动,让父级 div 能自动获取到高度。...---- 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有 CSS 文件、JS 与图片?...Collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局,被行或列占据的空间会留给其他内容使用。 如果此值被用在其他的元素上,会呈现为 hidden。...---- 有一个高度自适应的 div,里面有两个 div,一个高度 100px,如何让另一个填满剩下的高度 ?

    2.4K20

    第213天:12个HTML和CSS必须知道的重点难点问题

    注意设置 absolute 属性的元素在标准流中不占位置。 **fixed:固定定位。**位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。...对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。...3.3 清除浮动的方法 方法1:给父级div定义 高度 原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。...,让父级DIV能够获取高度。...它是一个独立的渲染区域,只有 Block-level box 参 与, 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。

    2.6K20

    前端面试题-每日练习(3)

    canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。...主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。 9.表单提交中Get和Post方式的区别? (1)、 get 是从服务器上获取数据, post 是向服务器传送数据。...(1)、父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。...clear:both 原理:添加一个空div,利用css提供的clear:both清除浮动,让父级div能自动获取到高度 优点:简单、代码少、浏览器支持好、不容易出现怪问题 缺点:不少初学者不理解原理...(相对是的HTML元素的字体大,默认16px) em与rem的重要区别: 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

    57620
    领券