零基础BootStrap
文章平均质量分 82
零基础BootStrap
程序员大阳
挖掘机哪家强,山东新泰找大阳
展开
-
零基础Bootstrap入门教程(0)--教程背景与目录
2021年春节,闲来无事,学习了下HTML/CSS/JavaScript基础知识。学习完成后发现,作为一个重逻辑轻设计的程序员,自己在样式设计上存在天然缺陷——缺乏美感。要想实现漂亮的网页,还是只能借助框架,于是翻出Bootstrap,作为新一代响应式Web框架的鼻祖,在样式设计方面,堪称权威。温故知新,在学习过程中,自己对Bootstrap进行了重点提炼、归纳总结,故有此教程。目录如下:Bootstrap教程(1)–为何要学习BootstrapBootstrap教程(2)–安装Bootstrap原创 2021-02-21 09:46:31 · 1551 阅读 · 4 评论 -
零基础Bootstrap入门教程(1)--为何要学习Bootstrap
背景代码及解释css及js版本建议背景给出一个使用Bootstrap做的网页的标准示例。代码及解释<!doctype html><!-- 告诉浏览器该文档是HTML5文档 --><html> <head> <meta charset="utf-原创 2018-03-30 22:37:32 · 3132 阅读 · 5 评论 -
零基础Bootstrap入门教程(2)--安装Bootstrap
网格容器<!--固定宽度的网格容器--><div class="container"></div><!--与窗口等宽的非固定宽度网格容器(横向铺满)--><div class="container-fluid"&g原创 2018-04-26 09:59:23 · 1443 阅读 · 0 评论 -
零基础Bootstrap入门教程(3)--容器与网格
标签<span class="label label-default">默认标签(灰色)</span><span class="label label-primary">主要标签(蓝色)</span><span class=&原创 2018-04-26 10:56:04 · 1297 阅读 · 0 评论 -
零基础Bootstrap入门教程(6)--使用面板
HTML表格先来回忆下HTML中的表格元素<table> <caption>标题</caption> <thead> <tr> <th>姓名</th>原创 2018-04-26 15:12:34 · 872 阅读 · 0 评论 -
零基础Bootstrap入门教程(7)--使用表格
表单控件添加.form-control样式即可将基本表单控件转化为Bootstrap样式.form-control 应用于表单控件.input-lg 大号控件.input-sm 小号控件Bootstrap基本表单<form><!--表单--> <div class="form-group">&原创 2018-04-26 16:42:32 · 3216 阅读 · 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 · 2391 阅读 · 0 评论 -
零基础Bootstrap入门教程(5)--使用标签、徽章、巨幕、Well
本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结1. 概述本篇介绍下几个常用的Bootstrap组件,即标签、徽章、巨幕和Well。这几个组件都比较简单,直接在HTML元素上添加class样式即可。2. 标签标签一般用于为元素添加附加信息,一般通过为<span>元素添加样式类来实现,例如: <div class="container-fluid"> <div class="row"> <d原创 2021-02-18 17:58:20 · 1246 阅读 · 0 评论 -
零基础Bootstrap入门教程(8)--使用表单样式
本文目录1. 概述2. HTML表单样式3. Bootstrap默认表单4. Bootstrap水平表单5. Bootstrap内联表单6. 小结1. 概述HTML自带的表单没有样式可言,非常难看。Bootstrap提供了样式优雅大方的表单,拿来即用,非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。2. HTML表单样式我们先来看下HTML自带的表单是啥样的。 <form action="#"> <label fo原创 2021-02-20 17:36:37 · 1016 阅读 · 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 · 1474 阅读 · 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 · 473 阅读 · 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-defaul原创 2021-02-21 12:28:03 · 2022 阅读 · 0 评论 -
零基础Bootstrap入门教程(12)--使用图标
本文目录1. 背景2. 使用Glyphicon图标3. 结合按钮使用4. 小结1. 背景大家都晓得,使用图标后,页面效果肯定是好许多的。一个简单的按钮,添加图标后,有一种传神的效果。精美的图标是要收费的,你享受人家优秀的成果,就得付出相应的价钱。有一个相当不错的图标库Glyphicon,老外做的,一般情况下咱们要正儿八经的使用,是要收费的。但是在Bootstrap框架下,使用Glyphicon图标是免费的,就是这么神奇!2. 使用Glyphicon图标使用Glyphicon图标很简单,为<原创 2021-02-21 17:19:05 · 2872 阅读 · 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 · 828 阅读 · 0 评论 -
零基础Bootstrap入门教程(14)--媒体与媒体列表
本文目录1. 概述2. 媒体实现3. 媒体列表4. 小结1. 概述看到媒体,不要误解,此处媒体不是指的单纯的图形、视频、音频等媒体形式,而是指的Bootstrap中提供的一种显示组件。Bootstrap媒体一般由文字、图像构成,大多数情况下图像作为一个抽象代表,文字作为内容描述。举个最常见例子,微信中的聊天会话就是一个典型的媒体,左侧是头像,右侧上方是微信名称,右侧下方是最新的消息内容。接下来我们就来使用Bootstrap实现下媒体。2. 媒体实现我们以微信聊天会话为例实现下媒体。首先,我们原创 2021-02-21 18:05:22 · 743 阅读 · 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 · 4356 阅读 · 0 评论 -
零基础Bootstrap入门教程(16)--模态框
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结1. 概述模态框这个名字有点高雅了,其实就是对话框,用来弹出一个新的界面。模态框的使用非常的场景,例如在用户管理页面,当进行用户新增时,可以点击新增按钮,弹出一个窗体供填入用户信息然后保存。注意Bootstrap的模态框一次只能显示一个,不能在打开一个模态框后尝试继续打开第二个。2. 模态框样式模态框相关的样式类比较多,我个人是感觉有些过于复杂了,当然这里也不排除Bo原创 2021-02-24 14:11:29 · 2896 阅读 · 0 评论 -
零基础Bootstrap入门教程(17)--分页
本文目录1. 概述2. 基本分页3. 使用转义字符4. 调整分页控件大小5. 设置分页按钮状态6. 小结1. 概述Bootstrap除了提供了表格,还提供了分页控件,使用起来也是比较简单,推荐大家尝试。2. 基本分页通过为<ul>元素设置pagination类,即可将列表转化为分页控件。示例代码: <div class="col-md-12"> 普通分页:<br> <ul class="p原创 2021-02-24 15:47:22 · 1046 阅读 · 0 评论 -
零基础Bootstrap入门教程(18)--进度条
本文目录1. 概述2. 普通进度条3. 隐藏文本4. 调整颜色5. 条纹效果6. 动画效果7. 小结1. 概述进度条的使用频率并不高,但是如果遇到合适的场景,使用之后对显示效果的提升还是比较明显的。Bootstrap为进度条提供了比较优雅的实现,本篇就来介绍下常见用法。2. 普通进度条先看一段代码: <div class="progress"> <div class="progress-bar" aria-valuenow="60原创 2021-02-25 16:36:59 · 1371 阅读 · 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 · 3844 阅读 · 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 · 3307 阅读 · 0 评论 -
零基础Bootstrap入门教程(21)--响应式导航栏详解
本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结1. 概述在很长的一段时间里,我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点,同时支持PC端显示和手机端显示。当使用手机打开时,导航栏会自动折叠为一个按钮,效果棒极了。后来学会了Bootstrap才知道,偶买噶,Bootstrap提供的导航栏原来天生就带这效果。厉害!2. 响应式导航栏导航栏的创建还是比较复杂的,但是不要担心,我们来一步步分析创建过程。原创 2021-02-28 17:29:43 · 5183 阅读 · 2 评论 -
零基础Bootstrap入门教程(22)--列表组
本文目录1. 概述2. 普通列表组3. 将普通链接转换为列表组4. 调整列表项的样式5. 带徽章的列表组6. 添加标题和内容7. 小结1. 概述列表组用来显示一组关联的显示元素,Bootstrap提供了可以灵活使用的列表组组件list-group,本篇就来具体演示下。2. 普通列表组用list-group类修饰ul元素,使用list-group-item类修饰li元素,即可创建列表组,代码如下: 普通列表组: <ul class="list-group"原创 2021-03-07 21:45:16 · 1251 阅读 · 0 评论 -
零基础Bootstrap入门教程(23)--标签页
本文目录1. 概述2. 使用方法3. 小结1. 概述标签页使用频率不算高,也不算太低,主要用于同一显示区域内切换不同的内容。本篇来简单讲一下如何使用标签页。2. 使用方法首先我们先来看一个标准的标签页代码: <ul class="nav nav-tabs"> <li><a href="#section1" data-toggle="tab">春晓</a></li>原创 2021-03-07 22:22:22 · 837 阅读 · 0 评论 -
零基础Bootstrap入门教程(24)--折叠插件
本文目录1. 概述2. 通过``元素控制折叠3. 通过JS控制折叠4. 小结1. 概述折叠的意义是当内容需要是,则显示在界面上,而内容不需要时,就是折叠收藏起来。Bootstrap对折叠的实现非常简单,我们本篇就来演示一番。2. 通过<a>元素控制折叠先看一段代码: <a type="button" class="btn btn-primary" data-toggle="collapse" href="#section1">显示春晓文字</a>原创 2021-03-11 21:08:03 · 1095 阅读 · 1 评论 -
零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航
本文目录1. 概述2. 折叠面板3. 折叠面板导航4. 小结1. 概述上一篇我们讲述了折叠插件的用法,可以将任意的div元素包含的内容进行动态的折叠/显示操作。本篇来讲述折叠中的两个特例,即折叠面板、折叠面板导航。2. 折叠面板折叠面板是将折叠效果应用于多个面板,从而在某一时间至多显示其中一个面板的控件。折叠面板实现稍微有些复杂,接下来我们来详细描述下:第1步,我么定义折叠面板div元素,并为其命名,需要特别注意panel-group类,表示多个面板的集合,即我们要创建的折叠面板。<d原创 2021-03-11 21:35:14 · 3027 阅读 · 7 评论 -
零基础Bootstrap入门教程(26)–轮播的实现
本文目录1. 概述2. 基本轮播3. 添加轮播指示器4. 添加轮播控件5. 小结1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难度的。一个好看的轮播,能瞬间提高网站的整体档次,很多购物网站或者视频网站在首页最显眼的位置,都是放置轮播大图组件。如果是使用Bootstrap框架的话,开发一个轮播就非常容易了,因为Bootstrap已内置轮播组件,拿来即用即可。本节我们就来学习下Boostrap的轮播组件。2. 基本轮播先上代码如下: <div id="caro原创 2021-03-14 21:31:06 · 1302 阅读 · 5 评论