我也要用
前端----Bootstrap
前端----BootStrap
熊猫大哥大
如有技术问题可通过微信公众号【熊猫大哥大】与我联系
-
原创 Bootstrap教程(21)--响应式导航栏详解
本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结1. 概述在很长的一段时间里，我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点，同时支持PC端显示和手机端显示。当使用手机打开时，导航栏会自动折叠为一个按钮，效果棒极了。后来学会了Bootstrap才知道，偶买噶，Bootstrap提供的导航栏原来天生就带这效果。厉害！2. 响应式导航栏导航栏的创建还是比较复杂的，但是不要担心，我们来一步步分析创建过程。2021-02-28 17:29:43
7
0
-
原创 Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航
本文目录1. 概述2. 选项卡式导航2.1 普通选项卡导航2.2 等宽选项卡导航3. 胶囊式导航3.1 普通胶囊式导航3.2 垂直胶囊式导航4. 面包屑导航5. 小结1. 概述Bootstrap提供了多种导航控件，本篇就来介绍下常用的选项卡式导航、胶囊式导航及面包屑导航。2. 选项卡式导航2.1 普通选项卡导航选项卡式导航，顾明司仪，看起来就像多个选项卡，基本用法如下： 选项卡式导航 <nav> <2021-02-28 16:02:19
46
0
-
原创 Bootstrap教程(19)--下拉菜单、按钮式下拉菜单
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结1. 概述下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下2021-02-28 09:54:45
25
0
-
原创 Bootstrap教程(18)--进度条
本文目录1. 概述2. 普通进度条3. 隐藏文本4. 调整颜色5. 条纹效果6. 动画效果7. 小结1. 概述进度条的使用频率并不高，但是如果遇到合适的场景，使用之后对显示效果的提升还是比较明显的。Bootstrap为进度条提供了比较优雅的实现，本篇就来介绍下常见用法。2. 普通进度条先看一段代码： <div class="progress"> <div class="progress-bar" aria-valuenow="602021-02-25 16:36:59
17
0
-
原创 Bootstrap教程(17)--分页
本文目录1. 概述2. 基本分页3. 使用转义字符4. 调整分页控件大小5. 设置分页按钮状态6. 小结1. 概述Bootstrap除了提供了表格，还提供了分页控件，使用起来也是比较简单，推荐大家尝试。2. 基本分页通过为<ul>元素设置pagination类，即可将列表转化为分页控件。示例代码： <div class="col-md-12"> 普通分页:<br> <ul class="p2021-02-24 15:47:22
16
0
-
原创 Bootstrap教程(16)--模态框
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结1. 概述模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。2. 模态框样式模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bo2021-02-24 14:11:29
18
0
-
原创 Bootstrap教程(15)--警告框、弹出框、工具提示框
本文目录1. 概述2. 警告框2.1 普通警告框2.2 可关闭警告框3. 弹出框3.1 弹出框初始化3.2 弹出框显示4. 工具提示框4.1 工具提示框初始化4.2 工具提示框显示5. 小结1. 概述本篇介绍的几种显示提示信息的方式，这几种方式并不常用，大家了解即可。2. 警告框2.1 普通警告框警告框用来显示一些希望让用户注意到的内容，例如上传文件时的主要注意的警示信息，或者更加严重的上传失败的提示信息。警告框有4中具体样式类，我们通过一个示例来演示下： <div class="2021-02-23 16:56:12
30
0
-
原创 Bootstrap教程(14)--媒体与媒体列表
本文目录1. 概述2. 媒体实现3. 媒体列表4. 小结1. 概述看到媒体，不要误解，此处媒体不是指的单纯的图形、视频、音频等媒体形式，而是指的Bootstrap中提供的一种显示组件。Bootstrap媒体一般由文字、图像构成，大多数情况下图像作为一个抽象代表，文字作为内容描述。举个最常见例子，微信中的聊天会话就是一个典型的媒体，左侧是头像，右侧上方是微信名称，右侧下方是最新的消息内容。接下来我们就来使用Bootstrap实现下媒体。2. 媒体实现我们以微信聊天会话为例实现下媒体。首先，我们2021-02-21 18:05:22
16
0
-
原创 Bootstrap教程(13)--图像和缩略图组
本文目录1. 概述2. 响应式图像3. 图像样式4. 缩略图组5. 小结1. 概述图片比文字传达信息更加直观、更加具象，具备不可代替的意义。必不可少的，Bootstrap也为图像提供了一定支持，本篇就来具体介绍下。2. 响应式图像通过给图像设置.img-responsive类，即可将图像设置为响应式图像，可以自动适应容器的大小。<img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">3.2021-02-21 17:41:55
40
0
-
原创 Bootstrap教程(12)--使用图标
本文目录1. 背景2. 使用Glyphicon图标3. 结合按钮使用4. 小结1. 背景大家都晓得，使用图标后，页面效果肯定是好许多的。一个简单的按钮，添加图标后，有一种传神的效果。精美的图标是要收费的，你享受人家优秀的成果，就得付出相应的价钱。有一个相当不错的图标库Glyphicon，老外做的，一般情况下咱们要正儿八经的使用，是要收费的。但是在Bootstrap框架下，使用Glyphicon图标是免费的，就是这么神奇！2. 使用Glyphicon图标使用Glyphicon图标很简单，为<2021-02-21 17:19:05
25
0
-
原创 Bootstrap教程(11)--按钮与按钮组
本文目录1. 概述2. 按钮的使用2.1 设置Bootstrap按钮2.2 调整按钮大小2.3 调整按钮颜色样式3. 按钮组的使用3.1 使用按钮组3.2 调整按钮组的大小3.3 调整按钮组方向4. 小结1. 概述按钮可以说是使用频率最高的交互组件之一了，Bootstrap框架对按钮也非常重视，提供了多种样式强化类。同时还提供了按钮组，可以组合使用按钮，更加方便。2. 按钮的使用2.1 设置Bootstrap按钮在Bootstrap框架下，只需要为按钮添加.btn类，然后添加.btn-defaul2021-02-21 12:28:03
23
0
-
原创 Bootstrap教程(10)--使用输入组来组合控件
本文目录1. 概述2. 使用输入组3. 调整输入组的大小4. 小结1. 概述Bootstrap还提供了一种组合使用表单控件的方式，即输入组。可以为输入控件添加前置、后置的补充内容。注意补充内容可以是文本，也可以是其他表单控件。2. 使用输入组输入组的使用并不复杂，通过.input-group类修饰的元素包裹输入控件，然后在输入控件的前、后添加.input-group-addon类修饰的元素即可。代码如下： <div class="col-md-6">2021-02-21 10:48:50
17
0
-
原创 Bootstrap教程(9)--使用表单控件
本文目录1. 概述2. 基本输入控件3. 调整表单控件的大小4. 表单控件的特殊用法4.1 单选框用法4.2 复选框用法5. 小结1. 概述表单控件用来获取表单中输入的信息，HTML5提供了各种不同的表单控件，而在Bootstrap中这些控件的样式得到了进一步的加强。2. 基本输入控件在Bootstrap中，只需为基本输入控件添加.form-control类，即可将控件的样式设置为Bootstrap提供的预设样式。接下来我们用一个实例来展示下常用的输入控件。 <!-- 基本输入控件 -2021-02-21 09:33:27
22
0
-
原创 Bootstrap教程(8)--使用表单样式
本文目录1. 概述2. HTML表单样式3. Bootstrap默认表单4. Bootstrap水平表单5. Bootstrap内联表单6. 小结1. 概述HTML自带的表单没有样式可言，非常难看。Bootstrap提供了样式优雅大方的表单，拿来即用，非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。2. HTML表单样式我们先来看下HTML自带的表单是啥样的。 <form action="#"> <label fo2021-02-20 17:36:37
47
0
-
原创 Bootstrap教程(7)--使用表格
表单控件添加.form-control样式即可将基本表单控件转化为Bootstrap样式.form-control 应用于表单控件.input-lg 大号控件.input-sm 小号控件Bootstrap基本表单&lt;form&gt;&lt;!--表单--&gt; &lt;div class="form-group"&gt;&2018-04-26 16:42:32
1032
0
-
原创 Bootstrap教程(6)--使用面板
HTML表格先来回忆下HTML中的表格元素&lt;table&gt; &lt;caption&gt;标题&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt;2018-04-26 15:12:34
204
0
-
原创 Bootstrap教程(5)--使用标签、徽章、巨幕、Well
本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结1. 概述本篇介绍下几个常用的Bootstrap组件，即标签、徽章、巨幕和Well。这几个组件都比较简单，直接在HTML元素上添加class样式即可。2. 标签标签一般用于为元素添加附加信息，一般通过为<span>元素添加样式类来实现，例如： <div class="container-fluid"> <div class="row"> <d2021-02-18 17:58:20
33
0
-
原创 Bootstrap教程(4)--开发标准的响应式网页
本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页，本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。2. 创建标准HTML5页面首先创建一个标准的HTML5网页，代码如下：<!DOCTYPE html><html><head> <title>boostrap-responsive</title>2021-02-18 10:04:09
50
0
-
原创 Bootstrap教程(3)--容器与网格
标签&lt;span class="label label-default"&gt;默认标签(灰色)&lt;/span&gt;&lt;span class="label label-primary"&gt;主要标签(蓝色)&lt;/span&gt;&lt;span class=&2018-04-26 10:56:04
549
0
-
原创 Bootstrap教程(2)--安装Bootstrap
网格容器&lt;!--固定宽度的网格容器--&gt;&lt;div class="container"&gt;&lt;/div&gt;&lt;!--与窗口等宽的非固定宽度网格容器(横向铺满)--&gt;&lt;div class="container-fluid"&g2018-04-26 09:59:23
139
0
-
原创 Bootstrap教程(1)--为何要学习Bootstrap
背景代码及解释css及js版本建议背景给出一个使用Bootstrap做的网页的标准示例。代码及解释&lt;!doctype html&gt;&lt;!-- 告诉浏览器该文档是HTML5文档 --&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-2018-03-30 22:37:32
1941
5
-
原创 BootStrap模态框卡顿问题解决
背景最近做了项目，前端使用了BootStrap模态框，类似下面代码。具体使用的场景是在一个.net桌面程序的WebBrowser控件中内嵌该网页，还有在Android应用的WebView控件中内嵌该网页。&lt;!-- 模态框 --&gt;&lt;div class="modal fade" id="modal-demo" tabindex="-1&qu2018-07-11 21:50:49
1997
0