Bootstrap 严格上说是一个CSS 框架，在过往的开发中前端对于.NET、Java 等后端开发人员来说是一件非常痛苦的事情。...本章主要讲解Bootstrap 的历史由来，如何在项目中使用Bootstrap，以及Bootstrap 框架中包含的内容。...jQuery.js 必须在Bootstrap.js 文件之前引入，因为在Bootstrap 中插件是以jQuery 为基础的，而浏览器中js 是顺序加载解析的。...html5shiv.js 主要是为了让不支持HTML5 特性的IE 浏览器版本识别HTML 5 中的元素，respond.js 是让不支持CSS 3 媒体查询（Media Query）的浏览器（主要是IE...bootstrap-theme.min.css 一般情况下不引用到页面中。
/#download 打开上URL，点击用于生产环境的 Bootstrap 方式二：CDN（有网的情况下） CDN下载 Normalize.css 为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。...，下面是一些配置 /* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...的栅格系统是如何在多种屏幕设备上工作的。
-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net/ajax...为了让 IE 浏览器运行最新的渲染模式下，建议将此标签加入到 head 部分 2.6 Bootstrap...-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> net/ajax/libs.../* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...使用列偏移只需在列元素上添加类名 .col-md-offset-* （星号代表要偏移的列组合数），具有这个类名的列就会偏移，如：在列元素上添加 .col-md-offset-4，表示该列向右偏移4个列的宽度
记得一定要添加 label 标签，如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。...Bootstrap Image 在 Bootstrap 3.0中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。...Bootstrap 验证样式 默认情况下ASP.NET MVC项目模板支持unobtrusive 验证并且会自动添加需要的JavaScript库到项目里。...", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.validate.bootstrap.js")); 注：默认情况下，ASP.NET...然后修改了JQuery validate插件默认的的设置，使其友好支持Bootstrap中的错误提示样式。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...MVC的项目，默认情况下，VS已经为我们添加了Bootstrap的文件。...记得一定要添加 label 标签，如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。...", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.validate.bootstrap.js")); 注：默认情况下，ASP.NET...然后修改了JQuery validate插件默认的的设置，使其友好支持Bootstrap中的错误提示样式。
"ASP.NET Boilerplate 基于DDD的经典分层架构思想，实现了众多DDD的概念（但没有实现所有DDD的概念）。"...但是最近我在开发的过程中在想,既然 ABP module-zero已经为我们封装好了 abpsession 封装好了权限,授权等管理,为什么我们还要自己去写呢,直接在原来的基础上扩展就可以了嘛.所以在12...特别是用户的要求越来越高，希望添加的功能越来多，目前这种开发模式，已经捉襟见肘。我很难想象如何在现有的模式下进行多系统的持续集成并添加一些新的特性。 ...不要过多的考虑基础的软件结构上的种种问题。应该有一个框框或者一种范式来提供基本的服务，如日志、容错和AOP，DI等。...是github上非常活跃的一个开源项目。它并没有使用任何新的技术，只是由两名架构师将asp.net开发中常用的一些工具整合到了一起，并且部分实现了DDD的概念。
下载之后，会得到一个安装包，我们只需要将安装包中的css font js 这三个文件夹放到项目目录即可 下载jquery:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery..."> 初始化模板：就是官网里面教你在创建html的时候需要导入哪些依赖包 bootstrao官方模板：不推荐使用，太过于冗余，有些用不上的也写上了 自定义bootstrap模板：推荐使用，简洁明了 官方模板...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net...中几个经典的尺寸类名后缀 lg: 大尺寸，对应大屏pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200px md：中尺寸，对应大屏平板ipadPro和小屏pc,在栅格系统响应式布局中对应的屏幕是...[992,1200) sm:小尺寸，对应平板ipad,在栅格系统响应式布局中对应的屏幕是 [768,992) xs:超小尺寸,对应手机移动端，在栅格系统响应式布局中对应的屏幕是<= 768 ==1.4-
类前缀 Bootstrap有四种不同的类前缀，让列适应四种不同尺寸的显示器： col-xs 超小显示器 (屏幕宽度 < 768px) col-sm 小型显示器 (屏幕宽度 ≥ 768px) col-md...但在大型显示器上如何呢？在上面的代码中，我们没有指定该元素在大型显示器上的表现。进一步的，Bootstrap将自动沿用在超小显示器上指定的布局。...因此，我们重新设计了用于平板模式的线框，如图所示 ? 在这个设计中，我们看到标题看起来与桌面模式相同。下面的帖子现在被包含在一个两栏的布局中，而不是三个。接下来，我们需要在移动设备上查看相同的网站。...这样，我们有两种用于平板的布局:一种是横向模式的三栏布局，一种是竖屏模式的两栏布局。 移动设备上的设计 和平板电脑一样，移动设备也可以在风景和人像模式下观看。...对于移动设备的线框，我们必须创建一个单列布局。我希望您已经知道如何在上述代码中实现它。对于额外的小屏幕，我们必须使用具有col_xs前缀的类。
响应式网页设计 根据设备尺寸，自动调整布局，有bootstrap和foundation等 bootstrap没有自定义标签，主要通过css扩展class foundation不兼容旧版本的ie 网格系统...相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局中必须row包含col，不能单独col...再html的display css属性上封装了三种布局方式，使用控件嵌套方式布局，设置宽度最大值和最小值 .container, which sets a max-width at each responsive...css） npm install jquery npm install popper.js (不要安装popper，要带js的) 安装bootstrap3 npm install bootstrap...@3（使用的时候需要css） npm install jquery(node导入jquery） import from ‘jquery’ window. = window.jQuery =
按钮 在前面的章节中，我们看到了如何创建各种类型的按钮。这里，我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们，并且让它们切换状态。...在Bootstrap 3版本,modals已经变得有响应性;这意味着它们看起来很好，即使在小屏幕上也能运行良好。...为了给模式对话框提供一个逐渐消失的效果，我们需要在这个容器中添加类fade。接下来，我们定义一个包含类modal-dialog的div元素。这是负责控制模态的大小。默认情况下，它按屏幕大小调整大小。...你甚至可以使用Bootstrap的网格系统来组织内容。 最后，为了创建一个模式页脚，我们定义了一个div元素，它有一个类modal-footer。在默认情况下，模式页脚中的内容是右对齐的。...这些对于在模式对话框中适当地填充内容非常有帮助。如果没有为modal-dialog元素提供额外的类，它的默认宽度是600px。
├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件，其他的文件都是在这个核心文件的基础上加了一些其他的样式 │ └── bootstrap.min.css.map...我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。 基础模板：简单看看结构 jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net...pycharm中设置HTML的模板样式： 京东的标签页： 标签页示例： 中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分
渐进增强:随着屏幕大小的增加而添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放: 屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小...答:简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。.../* 超小设备（手机，小于 768px） */ /* Bootstrap 中默认情况下没有媒体查询,但是可以自己添加 */ @media (max-width: @screen-xs-max) {...，其他设备上隐藏元素 .sr-only-focusable # 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框和警告框
官网：http://jui.org/ 下载：https://github.com/dwzteam/ 三、HUI H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT...页面规范、精致、细腻、美观大方；功能强大、非常全；在所有我看到过的基于Bootstrap的网站模版中，Metronic是我认为最优秀的之一，其外观之友好、功能之全面让人惊叹。...，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。...八、Admin LTE AdminLTE 是一个基于Bootstrap 3.x的免费主题，它是一个完全响应式管理模板。高度可定制的，易于使用。适合从小型移动设备到大的台式机很多的屏幕分辨率。...，其外观之友好、功能之全面让人惊叹。
通俗的理解，就是在不同的屏幕规格上能够有不同的布局效果，比如在大尺寸屏幕上呈现多列的布局，在小尺寸屏幕上呈现不了这么多，可能就只剩下一列布局了。...那么，当屏幕尺寸发生变化时，在不同屏幕规格上，应该呈现怎样的布局，一般是通过媒体查询 @Media 来实现，但自己在 CSS 中书写的话，需要处理较多工作。...BootStrap 的页面中需要引入的，需要注意的是，由于 BootStrap 一些组件依赖于 jQuery 和 Popper，所以需要引入这两份 js，而且顺序是 jQuery 先，Popper 后..., initial-scale=1, shrink-to-fit=no"> 这行代码表示的意思是，让网页可以自动适应当前移动设备的屏幕。...目前的代码里，我们完全没有写过 CSS，只在 HTML 文档中，添加了 标签内容，就能够达到这样的页面效果了，所以，其实，BootStrap 已经封装好了一大堆属性样式，我们只要在标签上通过
--bootStrap不支持ie 的编码模式，这句代码是为了让IE运行最新的渲染模式--> 的移动设备是把页面放进一个虚拟的视图：viewport中，一般情况先，这个视口比屏幕宽，这样就不用把每个网页挤到很小的设备屏幕大小中，但是用户浏览需要缩放or左右平移页面才能看清楚...viewport可以让开发者控制在移动设备上显示时页面的大小或缩放，这里的宽度是控制viewport/视口的大小，可以指定一个值，width=device-width就是让视口宽度等于设备的宽度的意思，...--下面这段代码就是注释了的，因为bootStrap的3.0以后的版本不支持ie7以及以下的版本，如果ie的版本低于ie9的话，也就是针对ie8，在[if it IE 9]之后的两句script中，第一个表示为使...-- jQuery (necessary for Bootstrap's JavaScript plugins) BootStrap中的js插件都依赖于jQuery，因此，jQuery要在BootStrap
在如何在 ASP.NET MVC 中集成 AngularJS(1)中，我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。...下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分。...开始的时候，我在 _Layout.cshtml 母版页的顶部编写了一些服务器端代码。我所做的头两件事情就是让从程序集信息类中获取应用的序列号，从应用程序设置中获取检索的基本 URL。...不幸的是，直到 AngularJS 配置阶段完成之后，才能提供 AngularJS 服务和方法集，因此我无法在主页中创建一个没有 AngularJS 错误的服务。...在这第二部分讲解中，作者解决了如何在 ASP.NET MVC 中集成 AngularJS 遇到的大部分问题。
：指定该元素在不同的设备上，所占的格子数目 样式：col-设备代号-格子数目 设备代号： 1.xs:超小屏幕 手机（<768px) col-xs-12 2.sm:小屏幕...平板（>=768px） 3.md:中等屏幕 桌面显示器（>=992px） 4.lg:大屏幕 大桌面显示器（>=1200px） 注意： 1.一行中如果格子数目超过12，...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> net
利用jquery不仅仅停留在只使用它的API和插件上，还可以会自己去写jquery插件，还可以去读jquery的源码、了解jquery的设计思路。如果你也能那样做，你会收获到意想不到的效果。...bootstrap从github上的排名也能看出道道来。很多公司的UI设计师，都从bootstrap上截图作为素材。 fontAwesome是全世界最强大的图标系统。...相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。 requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺的。...手动一条一条写写html语句，很没有效率哦。这时候使用zencoding的协助，你的开发效率就很很高哦。 手动对html、css、js的压缩、合并、语法检查，文件的清除、复制这些操作，真的不累么？...除了在文章中列出来的知识，在工作中你可能还需要以下的小伎俩哟，让你的leader对你赞赏有加： 要了解敏捷软件开发流程（如SCRUM）和项目管理知识（如PMP），这也属于一种“软”知识吧； 要学会在网上和别人交流
网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。...jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。...2.1 引入文件 bootStrap.min.css jquery.min.js bootStrap.min.js 2.2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口...使用行样式row来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。 如果要做投票，可以试下进度条。
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
