七、图片 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 343 | 时长 ≈ 1 分钟1 响应式图片在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。不加 .i ...阅读全文 »
六、按钮 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 1.7k | 时长 ≈ 7 分钟1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类 .btn 即可使用 Bootstrap 提供的样式。为元素添加 .btn 和 .btn-default 类可完成按钮样式。.btn 是按钮通用样式(基类)。.btn-d ...阅读全文 »
五、表单 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 5.6k | 时长 ≈ 28 分钟1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .f ...阅读全文 »
四、表格 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 2.7k | 时长 ≈ 15 分钟表格1 基本实例 .table为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。12345678 ...阅读全文 »
三、排版 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 2.3k | 时长 ≈ 10 分钟使用bootstrap的排版特性,可以创建标题、段落、列表及其他内联元素,实际上它是把大部分在HTML的基本标签加了样式。1 标题HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标 ...阅读全文 »
二、栅格系统 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 4.3k | 时长 ≈ 22 分钟说白了就是媒体查询和百分比布局bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。123bootstrap3是移动设备优先bootstrap的栅 ...阅读全文 »
一、bootstrap介绍 发表于 2020-07-08 | 更新于: 2020-07-08 | 分类于 web前端 , bootstrap | | 字数: 1k | 时长 ≈ 4 分钟1、 bootstrap是什么Bootstrap中文文档由@mdo 和 @fat 在Twitter工作时创建,Bootstrap使用 LESS CSS 并用 Node 编译,托管在 GitHub 上,方便大家使用这一框架构建更好的web应用。Bootstrap 是最受欢迎的 HTML、CSS 和 J ...阅读全文 »
九、响应式网页制作 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 , 视口布局 | | 字数: 1.2k | 时长 ≈ 5 分钟九、响应式网页制作9.1 概念同一个网页根据视口的不同,显示不同的版式。响应式网页制作:responsive web design (RWD)9.2 优缺点优点:对于不同视口都可以显示非常饱满的网页结构,没有横向滚动条。缺点:制作复杂,同时对于移动端而言,需要加载非常多的pc端的样式和图片等资源,影 ...阅读全文 »
八、移动端常用模型 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 , 视口布局 | | 字数: 347 | 时长 ≈ 1 分钟八、移动端常用模型8.1 固比固模型固比固模型:第一和第三部分宽度确定,第二部分宽度自适应。8.1.1 浮动方法:1234567891011121314.box { width: 100%; overflow: hidden;}.box p { flo ...阅读全文 »
七、多行文字截取 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 , 视口布局 | | 字数: 214 | 时长 ≈ 1 分钟七、多行文字截取7.1 多行文字截取显示省略号123456789101112131415161718.box { width: 300px; height: 100px; border: 1px solid #000; margin: 50px auto; f ...阅读全文 »