BootStrap3
关注
分享
扫一扫
BootStrap v3.3.7学习
爱喝水的qdy
No sacrifice, No victory!
展开
-
BootStrap3 导航条组件
目录官方地址整体结构导航头响应式图标品牌图标导航体导航菜单导航表单非导航链接导航文字非导航按钮特别说明导航条组件固定在顶部导航条组件固定在底部导航条组件静止在顶部导航条反色组件排列整体代码官方地址https://v3.bootcss.com/components/#navbar整体结构<nav class="navbar navbar-default"> <div...原创 2019-11-23 23:22:09 · 486 阅读 · 0 评论 -
BootStrap3 面板组件
目录官方地址基本结构情境色带表格的面板带列表组的面板整体代码官方地址https://v3.bootcss.com/components/#panels基本结构.panel.panel-body.panel-footer<!-- 基本结构 --><div class="container"> <div class="panel panel-d...原创 2019-11-23 19:08:43 · 223 阅读 · 0 评论 -
BootStrap3 列表组系列
目录官方地址列表组三种形式ul > lidiv > buttondiv > a禁用和激活情境色自定义内容带徽章组件整体代码官方地址https://v3.bootcss.com/components/#list-group列表组三种形式ul > lidiv > buttondiv > aul > li<!-- 形式一 ul >...原创 2019-11-23 19:01:02 · 403 阅读 · 0 评论 -
BootStrap3 输入框组系列
目录官方地址普通文本作为额外元素普通字符单选和多选按钮作为额外元素单个按钮下拉和分裂式多个按钮尺寸input-group-lg整体代码input-group-sm官方地址https://v3.bootcss.com/components/#input-groups普通文本作为额外元素.input-group.input-group-addon普通字符<div class="co...原创 2019-11-23 18:25:03 · 704 阅读 · 0 评论 -
BootStrap3 按钮式下拉菜单系列
目录官方地址按钮式下拉菜单分裂式下拉菜单向上弹出下拉菜单尺寸分裂式尺寸非分裂式尺寸整体代码官方地址https://v3.bootcss.com/components/#btn-dropdowns按钮式下拉菜单<div class="container"> <!-- btn-group 跟普通的dropdown 的区别在于 btn-group是in...原创 2019-11-22 20:08:32 · 336 阅读 · 0 评论 -
BootStrap3 按钮组系列
目录官方地址按钮组按钮工具栏尺寸带下拉菜单的按钮组向上弹出菜单项垂直排列两端对齐button形式a形式整体代码官方地址https://v3.bootcss.com/components/#btn-groups按钮组.btn-group<!-- 按钮组 --><div class="container"> <div class="btn-group"...原创 2019-11-22 20:02:25 · 205 阅读 · 0 评论 -
BootStrap3 导航组件
目录官方地址标签式导航胶囊式导航垂直排列两端对齐禁用状态添加下拉菜单动态标签页整体代码官方地址https://v3.bootcss.com/components/#nav标签式导航.nav.nav-tabs<!-- 标签式导航 --><div class="container"> <nav> <ul class="...原创 2019-11-22 19:56:30 · 215 阅读 · 0 评论 -
BootStrap3 媒体对象系列
目录官方地址基本用法左展示媒体内容右展示媒体内容媒体内容垂直对齐media-topmedia-middlemedia-bottom媒体对象列表整体代码官方地址https://v3.bootcss.com/components/#media基本用法.media.media-left.media-object.media-body.media-heading<!-- 基本用法 ...原创 2019-11-22 13:10:41 · 420 阅读 · 0 评论 -
BootStrap3 进度条系列
目录官方地址基本用法带文字说明的进度条设置最小宽度情境色条纹状的进度条带动画的进度条堆叠效果整体代码官方地址https://v3.bootcss.com/components/#progress基本用法.progress.progress-bar<!-- 基本用法 --><div class="container"> <div class="...原创 2019-11-21 21:44:30 · 347 阅读 · 0 评论 -
BootStrap3 徽章系列
目录官方地址基本用法整体代码官方地址https://v3.bootcss.com/components/#badges基本用法.badge<!-- 基本用法 --><p> <span class="badge"></span></p><p> <span class="badge">...原创 2019-11-21 21:36:10 · 107 阅读 · 0 评论 -
BootStrap3 标签系列
目录官方地址基类情境色整体代码官方地址https://v3.bootcss.com/components/#labels基类.label<span class="label label-default">New</span>情境色.label-primary.label-success.label-info.label-warning.label-...原创 2019-11-21 21:34:41 · 278 阅读 · 0 评论 -
BootStrap3 翻页系列
目录官方地址居中式两端对齐禁用状态整体代码官方地址https://v3.bootcss.com/components/#pagination-pager居中式.pager<!-- 居中式 --><div class="container"> <nav> <ul class="pager"> ...原创 2019-11-21 21:29:41 · 192 阅读 · 0 评论 -
BootStrap3 分页系列
目录官方地址基本用法禁用和激活状态尺寸pagination-lgpagination-sm整体代码官方地址https://v3.bootcss.com/components/#pagination基本用法.pagination<!-- 基本用法 --><div class="container"> <nav> <ul c...原创 2019-11-21 21:27:02 · 584 阅读 · 0 评论 -
BootStrap3 警告框alert
目录官方地址基类情境色警告框中的链接警告框中的glyphicon图标可关闭的警告框淡入淡出效果整体代码官方地址https://v3.bootcss.com/components/#alerts基类.alert情境色.alert-success.alert-infoalert-warningalert-danger<!-- 情境色 --><div clas...原创 2019-11-20 21:44:46 · 1190 阅读 · 0 评论 -
BootStrap3 路径导航breadcrumb
目录官方地址用法整体代码官方地址https://v3.bootcss.com/components/#breadcrumbs用法.breadcrumb.active当前路径用.active声明，并且注意，内容不要用<a />包裹，直接写即可<ul class="breadcrumb"> <li> <a hre...原创 2019-11-20 21:10:23 · 206 阅读 · 0 评论 -
BootStrap3 下拉菜单dropdown
目录官方地址基本用法向上弹出菜单菜单项对齐左对齐带标题的下拉菜单带分割线的下拉菜单激活的菜单项禁用的菜单项整体代码官方地址https://v3.bootcss.com/components/#dropdowns基本用法.dropdown 声明下拉菜单组件button 声明触发器.dropdown-toggledata-toggle="dropdown"ul 声明菜单项....原创 2019-11-20 20:52:28 · 1099 阅读 · 0 评论 -
BootStrap3 图标glyphicon
目录官方地址glyphicons官方地址基类说明用法整体代码官方地址https://v3.bootcss.com/components/#glyphiconsglyphicons官方地址http://glyphicons.com/基类.glyphicon说明图标类只能应用在不包含任何文本内容或子元素的元素上。为了设置正确的内补（padding），务必在图标和文本之间添加一个空格...原创 2019-11-19 20:24:02 · 851 阅读 · 0 评论 -
BootStrap3缩略图
目录官方地址类基本用法自定义内容整体代码官方地址https://v3.bootcss.com/components/#thumbnails类.thumbnail基本用法<div class="container"> <figure> <a href="http://www.baidu.com" class="thumbnail"&g...原创 2019-11-19 20:16:49 · 157 阅读 · 0 评论 -
BootStrap3 页头
目录官方地址用法整体代码官方地址https://v3.bootcss.com/components/#page-header用法.page-header页头组件能够为h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持h1 标签内内嵌small元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。<div class="page-header">...原创 2019-11-19 20:13:57 · 226 阅读 · 0 评论 -
BootStrap3 响应式的嵌入内容
目录官方地址嵌入内容类iframeobjectembedvideo整体代码官方地址https://v3.bootcss.com/components/#responsive-embed嵌入内容iframeobjectembedvideo类.embed-responsive.embed-responsive-16by9.embed-responsive-4...原创 2019-11-19 20:11:49 · 305 阅读 · 0 评论 -
BootStrap3 巨幕系列
目录官方地址基类用法一用法二用法三整体代码官方地址https://v3.bootcss.com/components/#jumbotron基类.jumbotron用法一<div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p>&...原创 2019-11-19 20:07:17 · 358 阅读 · 0 评论 -
BootStrap3 Well系列
目录官方地址基本用法Well尺寸整体代码官方地址https://v3.bootcss.com/components/#wells基本用法.well<div class="container"> <div class="well"> Look, I'm in a well! </div></div>Wel...原创 2019-11-19 20:04:00 · 107 阅读 · 0 评论 -
BootStrap3 表单系列
目录官方地址说明基本实例内联表单水平排列表单单选和多选内联单选和多选静态控件表单禁用状态被禁用的fieldset帮助文本校验状态控件尺寸高度尺寸水平排列表单的尺寸整体代码官方地址<https://v3.bootcss.co说明所有设置了.form-control类的input、textarea、select，都将被默认设置宽度属性为width: 100%将label以及in...原创 2019-11-18 21:26:01 · 329 阅读 · 0 评论 -
BootStrap3 按钮系列
目录官方地址基类可作为按钮的元素尺寸情境样式激活状态禁用状态整体代码官方地址https://v3.bootcss.com/css/#buttons-options基类.btn可作为按钮的元素<a class="" role="button" href=""></a><button class="" type="button"></butto...原创 2019-11-18 19:03:22 · 588 阅读 · 0 评论 -
BootStrap3 辅助类
目录官方地址情境文本颜色情境背景色关闭按钮三角符号快速浮动内容块居中清除浮动显示或隐藏内容图片替换整体代码官方地址https://v3.bootcss.com/css/#helper-classes情境文本颜色.text-muted.text-primary.text-success.text-info.text-warning.text-danger<!-- 情境文...原创 2019-11-17 22:09:37 · 168 阅读 · 0 评论 -
BootStrap3 响应式工具
目录官方地址响应式工具整体代码官方地址https://v3.bootcss.com/css/#responsive-utilities响应式工具.visible-[size]-[inline | block | inline-block].hidden-[size].visible-print-[inline | block | inline-block].hidden-print...原创 2019-11-17 21:42:04 · 150 阅读 · 0 评论 -
BootStrap3 图片系列
目录官方地址响应式图片图片形状整体代码官方地址https://v3.bootcss.com/css/#images响应式图片.img-responsive<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574602183&di=91ca36f...原创 2019-11-17 21:34:27 · 492 阅读 · 0 评论 -
BootStrap3 表格系列
目录官方地址基类条纹状表格带边框鼠标悬停紧缩表格状态类响应式表格整体代码官方地址https://v3.bootcss.com/css/#tables基类.table条纹状表格.table-striped<table class="table table-striped"> <thead> <tr> <th>...原创 2019-11-17 21:26:42 · 368 阅读 · 0 评论 -
BootStrap3 代码系列
目录官方地址内联代码用户输入代码块变量程序输出整体代码官方地址https://v3.bootcss.com/css/#code内联代码code<!-- 内联代码 --><p> <code><section></code></p>用户输入kbd<p> <kb...原创 2019-11-17 21:15:19 · 166 阅读 · 0 评论 -
BootStrap3 排版
目录标题中心内容内联文本元素地址对齐改变大小写缩略语首字母缩略语引用列表无序列表有序列表样式描述列表总体标题h1 ~ h6.h1 ~ h6small.small<!-- 标题 --><h1>h1. 标题</h1><h2>h2. 标题</h2><h3>h3. 标题</h3><h4>...原创 2019-11-16 22:15:18 · 248 阅读 · 0 评论 -
BootStrap3 栅格系统
目录栅格系统说明基本使用列嵌套列偏移列排序总体栅格系统 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) ...原创 2019-11-16 21:08:11 · 195 阅读 · 0 评论 -
BootStrap3 布局容器
目录布局容器布局容器.container.container-fluid<!-- container --><div class="container" style="background-color: orange;"> <p> container </p></div><!-- ...原创 2019-11-16 21:02:24 · 192 阅读 · 0 评论 -
BootStrap3起步
目录官方地址基本模板官方地址https://www.bootcss.com/基本模板<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge...原创 2019-11-16 20:59:31 · 148 阅读 · 0 评论