Bootstrap 框架
关注
分享
扫一扫
文章平均质量分 55
.NET跨平台
比较认真。编程就是算法和数据结构，算法和数据结构是编程的灵魂。
展开
-
Bootstrap 思维导图
bootstrap简单总结Bootstrap4基础知识结构 Bootstrap4前台框架转载 2022-04-15 01:51:08 · 6801 阅读 · 1 评论 -
[Bootstrap]Bootstrap中按钮如何设置靠右对齐呢？
问题描述如题，Bootstrap中如何将以下列表中的按钮设置为靠右对齐呢？以下是一段简单的示例，需要将其中每个li中的按钮靠右对齐：<ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li></ul>方案一在转载 2021-09-11 23:38:18 · 16518 阅读 · 0 评论 -
Bootstrap 4 中文开发手册 Cards（卡）
Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。关于一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。示例卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。以下是具有混合内容和固定宽度的基本卡转载 2021-09-05 19:52:21 · 872 阅读 · 0 评论 -
Bootstrap 4 中文开发手册 Display property（显示属性）
通过我们的显示实用程序快速响应地切换组件的显示值。包括对一些更常见的值的支持，以及一些额外功能，用于控制打印时的显示。共同的display价值display属性接受了一些值，我们用实用程序类支持其中的许多值。我们故意不提供每个价值作为实用工具，所以我们支持：.d-none.d-inline.d-inline-block.d-block.d-table.d-table-cell.d-flex.d-inline-flex通过将任何类应用到您选择的元素来使用它们。例如，下面介绍如何使用内转载 2021-09-05 19:25:30 · 708 阅读 · 0 评论 -
Bootstrap4 学习笔记2
这一篇记录通用工具类。记录Borders:// 设置边框<span class="border"></span><span class="border-top"></span><span class="border-right"></span><span class="border-bottom"></span><span class="border-left"></span&g转载 2021-09-04 03:42:03 · 363 阅读 · 0 评论 -
bootstrap4.x 笔记
布局系统栅格布局，bootstrap4.x 以移动端优先 576/768/997/1200container：左右padding:15pxcontainer-fuild:没有内边距栅格等级.col : 小于超小屏幕 <576px , 不管多小都不会换行.col-sm : 大于小屏幕 >=576px ,.col-md : >=768px.col-lg : >=992px.col-xl : >=1140px意思就是屏幕宽度符合我们定义的某一区间等级中，就按这个等转载 2021-09-03 13:15:46 · 254 阅读 · 0 评论 -
bootstrap4 调整元素之间距离 margin 和padding
响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。一、影响距离大小的值有0,1,2,3,4,5,auto(1)、margin值有class名等价的stylem-0 等价于{margin:0 !important} m-转载 2021-07-03 23:30:28 · 3617 阅读 · 0 评论 -
bootstrap栅格系统的container和row一些关系
container有个15px的padding，而我们设定的每个col也都有15px的padding，如果两者直接配合，那么就会产生30px的间距，导致内容和浏览器边框的距离较大，所以用row将所有的col包裹，row会有一个-15px的margin，可以抵消掉一个container或col产生的15px的padding值。另，官网中的关于gutter的条目中的示例：（https://getbootstrap.com/docs/4.3/layout/grid/）<div class="conta.转载 2021-06-29 16:45:32 · 1165 阅读 · 0 评论 -
form-group 两种常用使用
用法一：运行结果如下：form-group ：增加盒子的下边界form-control： 充满整个父元素，并且有换行作用用法二：运行结果如下：control-label :元素内实现包含内容右对齐转载 2021-06-27 23:39:25 · 1101 阅读 · 0 评论 -
bootstrap4 调整元素之间距离
影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。一、影响距离大小的值有0,1,2,3,4,5,auto(1)、margin值有class名等价的stylem-0等价于{margin:0 !import转载 2020-11-19 21:11:46 · 1862 阅读 · 0 评论 -
BootStrap思维导图
BootStrapBootStrap框架知识总结,欢迎下载学习Bootstrap4前台框架Bootstrap4基础知识结构转载 2019-12-18 22:20:25 · 756 阅读 · 0 评论 -
Bootstrap框架思维导图
BootStrap简介Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架学习整理思维导图...转载 2019-12-18 22:05:53 · 651 阅读 · 0 评论 -
bootstrap思维导图
前端框架Bootstrap内置组件思维导图转载 2019-12-18 22:02:43 · 930 阅读 · 0 评论 -
Bootstrap一个小案例
index.html&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;转载 2018-08-17 10:57:24 · 582 阅读 · 0 评论 -
Bootstrap 下拉菜单（Dropdown）插件
Bootstrap 下拉菜单（Dropdown）插件Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提...转载 2019-06-12 22:19:54 · 1955 阅读 · 0 评论 -
Bootstrap整体架构
大多数Bootstrap的使用者都认为Bootstrap只是提供了CSS组件和JavaScript插件，其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已，他们都是构建在基础平台之上的，整体架构图：上图总共分为6大部分，除了CSS组件和JavaScript插件以外，另外4个部分都是基础支撑平台。...转载 2019-08-23 14:18:46 · 2039 阅读 · 0 评论 -
Bootstrap源码分析系列之整体架构
作为一名合格的前端工程师，你肯定听说过Bootstarp框架。确实可以说Bootstrap框架是最流行的前端框架之一。可是也有人说Bootstrap是给后端和前端小白用的，我认为只要学习它能给我们前端技能带来提升，那么我们就有必要研究一下它。Bootstrap框架虽然也提供了javascript插件，但总感觉不够用。Bootrtrap更多的则是被用作css框架。之前我也用过几次Bootstrap，...转载 2019-08-23 14:25:40 · 352 阅读 · 0 评论 -
Bootstrap 模态窗口源码分析
前言：bootstrap的 js插件的源码写的非常好，也算是编写jquery插件的模范写法，本来还想大篇详细的分析一下呢，唉，没时间啊，很早之前看过的源码了，现在贴在了博客上，300来行的代码，其中有很多jquery的高级用法，建议，从github上下载一下源码，然后把本篇的代码复制过去，然后，边运行，边阅读，如果有不明白的地方，可以给我留言，我给解答。下面是基本每行都加了注释/* ===...转载 2019-08-23 14:29:47 · 311 阅读 · 0 评论 -
Bootstrap源码分析系列之核心CSS
本节主要介绍核心CSS，从整体架构中的7个Less文件对应的源码分别进行分析scaffolding.less这个文件编译后的css文件(886~989行)其作用就像定义全局样式。//调整css盒模型为border-box,这样修改使得添加padding不至于元素宽度超出边界 * { -webkit-box-sizing: border-box; -moz-box-sizing: bor...转载 2019-08-23 14:40:37 · 515 阅读 · 0 评论 -
Bootstrap CSS根据屏幕大小控制隐藏与显示
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。超小屏幕小屏幕中等屏幕大屏幕手机 (<768px)平板 (≥768px)桌面 (≥992px)桌面 (≥1200...转载 2019-09-14 21:47:39 · 10852 阅读 · 0 评论 -
Bootstrap 页面元素隐藏与显示
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>课室单元::日历</title> <meta name="viewport" content="width=device-width, initial-sca...转载 2019-09-24 22:52:51 · 2979 阅读 · 0 评论 -
bootstrap系列之响应式布局及相关的visible-sm、hidden-xs等的使用
响应式布局：响应式工具不能用于table元素，而且 本身就不支持响应式布局需要在处添加如下语句：在css中添加如下内容 可以分别定制不同屏幕的显示样式：/* 大屏幕 ：大于等于1200px*/@media (min-width: 1200px) { … }/默认/@media (min-width: 980px){…}/* 平板电脑和小屏电脑之间的分辨率 */@media (mi...转载 2019-05-23 20:22:59 · 4137 阅读 · 0 评论 -
Bootstrap常用表单布局（HTML）
本文介绍一下在后台管理系统中，常用的两种基于Bootstrap的表单布局（水平布局 和 垂直布局）下面是两个使用的效果图：水平布局：水平布局垂直布局：垂直布局水平布局代码 水平方向表单布局-BootStrap常用表单布局 常用水平表单布局 ...转载 2019-05-20 14:09:03 · 2850 阅读 · 0 评论 -
Bootstrap列表添加滚动条
有时候列表中数据过多，导致超出页面，影响视觉感受。这时我们需要添加一个滚动条。初始状态如图：代码如下： &amp;lt;ul class=&quot;list-group&quot;&amp;gt; &amp;lt;li class=&quot;list-group-item&quot;&amp;gt;免费域名注册&amp;l转载 2019-01-04 17:00:15 · 3018 阅读 · 0 评论 -
Bootstrap双列表
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Dual List&lt;/title&gt; &lt;link rel="stylesheet" href="http://maxcd转载 2019-01-04 16:59:52 · 1057 阅读 · 0 评论 -
使用.NET MVC和Bootstrap
项目结构HomeController.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using TodoList.Models.Login;namespace TodoList.Controllers{ pu...转载 2019-01-03 23:41:00 · 502 阅读 · 0 评论 -
浅析Bootstrap中Tab（标签页）的使用方法
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换如&quot;.nav-pills&quot;（胶囊式导航）与 “.nav-tabs” （标签式导航）创建一个标签式的导航菜单：以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。下面的实例演示了这点： Home Profile Messages Sett...转载 2018-10-23 10:02:36 · 24923 阅读 · 1 评论 -
使用Bootstrap tab页切换的使用
Html代码：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;base target=&quot;_self&quot;&amp;gt转载 2018-08-17 10:56:48 · 28287 阅读 · 0 评论 -
基于Bootstrap的标签页组件bootstrap-tab
bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能：tab页初始化关闭tab页新增tab显示tab页获取tab页ID使用Step1 ：引入样式 1234Step2：引入脚本 1 2 3Step3：使用 (&amp;amp;quot;#tabContai...转载 2018-08-17 10:54:47 · 8062 阅读 · 0 评论 -
Bootstrap模态框(Modal)
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法您可以切换模态框（M...转载 2018-07-27 13:30:14 · 1046 阅读 · 0 评论 -
Bootstrap常见问题汇总
bootstrap 图标glyphicons图标符号不正常显示解决办法分享供各位参考：1、在ff/http:的地址栏中输入“about:config”，即进入配置界面。2、进入后，搜索“security.fileuri.strict_origin_policy”，这是该值应该是true。3、双击该项，其值自动变为false，即可。4、修改后，再刷新遇到问题的页面，即可看到正常显...转载 2018-05-21 23:03:02 · 2458 阅读 · 0 评论 -
一个开源、美观的日期选择器(bootstrap datepicker)
bootstrap-datepicker是一个开源、基于bootstrap的日期选择器，内置60+种语言，基于bootstrap也使得选择器非常美观适合现代网站，功能强大，通过内置属性、方法、事件组合配置可以满足几乎所有日期选择需求，唯一遗憾的是不支持时间选择，只能选择年月日。1、下载及初始化然后在页面body元素中创建一个容器，如下所示。最后在id为sandbox-container...转载 2019-01-04 17:00:34 · 1835 阅读 · 0 评论 -
Bootstrap和ladda.js
&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;转载 2018-12-31 14:27:12 · 1231 阅读 · 0 评论 -
bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg
.col-xs- 超小屏幕 手机 (&lt;768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示器 (≥992px).col-lg- 大屏幕 大桌面显示器 (≥1200px)HTML代码：&lt;div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"&gt;&lt;/div&a转载 2018-12-31 15:02:02 · 945 阅读 · 0 评论 -
Bootstrap 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单布局Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父 <form&...转载 2019-05-19 23:19:40 · 432 阅读 · 0 评论 -
bootstrap-modal.js学习笔记(源码注释)
主要知识点：通过on,one注册自定义事件，并且只能通过trigger来触发计算滚动条的宽度，通过生成一个div节点，overflow为scroll，那么就有滚动条了，然后就可以计算出滚动条的宽度把变量绑定在该dom元素的data的某个属性上，这个很妙/* ===================================================================...转载 2018-12-31 15:53:46 · 1065 阅读 · 0 评论 -
Bootstrap的Model源码详细注释 (转)
/* ======================================================================== * Bootstrap: modal.js v3.2.0 * http://getbootstrap.com/javascript/#modals * =============================================...转载 2018-12-31 15:51:46 · 552 阅读 · 0 评论 -
bootstrap插件学习-bootstrap.modal.js
先从bootstrap.modal.js的结构看起。复制代码function($){var Modal = function(){} //构造器Modal.prototype = function(){} //构造器的原型function …(){} //自定义方法$.fn.modal = function(){} //在jQuery对象上自定方法$.fn.modal.defau...转载 2018-12-31 15:51:10 · 754 阅读 · 0 评论 -
Bootstrap插件modal源码的学习
使用说明两部分需要定义：模态框的触发元素，需要data-toggle=“modal”，以便被初始化；需要data-target=&quot;#example&quot;或href指定模态框模态框，模态框容器需要与data-target对应的类或id，其内容部分可以用&quot;modal-content&quot;的类来美化样式触发按钮 title转载 2018-12-31 15:50:07 · 1221 阅读 · 0 评论 -
设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 (2) 修改高度和宽度最好的办法是修改modal-body中添加的控件，设置控件的大小，modal会自动适应。例如 × 选择移动到的目录 &nbsp; &nbsp; &nbsp; &nbs...转载 2018-12-31 15:47:58 · 5861 阅读 · 0 评论