bootstrap
文章平均质量分 56
麦子莉莉
这个作者很懒,什么都没留下…
展开
-
引入Bootstrap方法
如果你是一名web前端开发工程师或者网页设计师,那么肯定对Bootstrap这个框架早有耳闻,甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。而在去年年底推出的Bootstrap3更是追随了响应式布局、扁平化设计的web开发与设计潮流,让我们感受到了它所带来的无穷魅力。我们会通过接下来一系列的Bootstrap教程,让Bootstrap初学者们转载 2017-01-16 14:17:41 · 18448 阅读 · 2 评论 -
Bootstrap导航栏样式使用
Bootstrap导航栏默认样式导航栏默认样式是灰色的,它的结构应该由nav标签来包裹,包含logo、页面列表等元素,简单的编码内容如下:<nav class="navbar navbar-default"> 佚站互联 杭州网站建设 杭州网站设计 杭州网站制作 以上代码的内容就是最基础的一个Bootstrap导航栏样式,按照这个结构你也转载 2017-01-16 17:30:54 · 6020 阅读 · 0 评论 -
Bootstrap内容分类使用方法(tab)
Bootstrap内容分类tab样式说到内容分类,或许tab形式是我们最常用的分类方式了,在一个区域中通过tab对标题进行标注,然后对应的tab对应不同的内容,Bootstrap中同样引入了nav的tab样式,让我们看看如何使用:<ul class="nav nav-tabs"> 杭州网站建设 杭州网站设计 杭州网站制作我们通过nav nav-tabs的样式引入到ul标签转载 2017-01-16 16:02:16 · 2315 阅读 · 0 评论 -
Bootstrap缩略图样式使用方法
默认Bootstrap缩略图样式因为缩略图可能要牵涉到链接,所以需要在图片外面加入一个a标签,缩略图样式直接写入这个a标签即可,使用起来非常方便:<a href="#" class="thumbnail"> 通过对a标签引入thumbnail样式,就可以实现Bootstrap缩略图的样式,而且hover还有对应的交互效果,非常不错,另外,为了符合SEO搜索引擎优化原则,你需要在img转载 2017-01-16 15:47:36 · 7390 阅读 · 0 评论 -
Bootstrap面板使用方法
Bootstrap面板基本样式直接调用面板样式也非常容易,只需要通过以下代码即可实现: Basic panel example 该样式仅仅包含了面板样式的内容部分,而没有加入头部,适用于不需要头部的面板内容。Bootstrap面板带标题样式上面提到的面板样式是没有带标题的,在一些情况下不够用,所以Bootstrap面板还提供了带有标题转载 2017-01-16 15:42:55 · 2041 阅读 · 0 评论 -
Bootstrap警告框使用方法
Bootstrap警告框类别根据为用户提示的内容类型,警告框可以分为成功、信息、警示、以及危险等四种。而颜色也用对应的绿色、蓝色、黄色、红色来设定,从而与其他页面内容进行区分,起到突出的效果。Bootstrap警告框使用方式与其他Bootstrap元素样式的使用方式一样,只需要在对应的元素中引入相关样式即可,代码如下:<div class="alert aler转载 2017-01-16 15:23:51 · 5809 阅读 · 0 评论 -
Bootstrap分页使用方法
默认Bootstrap分页样式这是默认的Bootstrap分页组件样式,效果简洁直观,如果想要符合自己的项目需求,可以将高亮颜色改为自己想要的颜色,其他样式直接引用即可,编写代码如下:<ul class="pagination"> « 1 2 3 4 5 »当前页面选项高亮与禁用状态通过引入disabled样式与ac转载 2017-01-16 15:22:53 · 5386 阅读 · 0 评论 -
Bootstrap导航栏样式使用
Bootstrap导航栏默认样式导航栏默认样式是灰色的,它的结构应该由nav标签来包裹,包含logo、页面列表等元素,简单的编码内容如下:<nav class="navbar navbar-default"> 佚站互联 杭州网站建设 杭州网站设计 杭州网站制作 以上代码的内容就是最基础的一个Bootstrap导航栏样式,按照这个结构你也转载 2017-01-16 15:20:44 · 3563 阅读 · 0 评论 -
Bootstrap下拉菜单使用方法
如何使用Bootstrap下拉菜单组件Bootstrap下拉菜单组件使用起来非常容易,首先你需要定义一个class="dropdown"的div,然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单,类似代码如下:<div class="dropdown"> 下拉按钮<a role="menuitem" tabindex="-1" href="#">下拉菜单1<a转载 2017-01-16 14:52:33 · 5638 阅读 · 0 评论 -
Bootstrap图标引用方法
Bootstrap图标集,Glyphicons图标Bootstrap的图标组件并非自己制作的,而是由国外一个图标团队提供的,虽然它们自身是收费图标,不过他们授权Bootstrap可以免费使用它们的200个图标。Glyphicons组件使用起来相当方便快捷,你可以参考Bootstrap图标引用样式,使用方法也相当简单,类似以下代码即可:<span class="glyphicon g转载 2017-01-16 14:44:59 · 5202 阅读 · 0 评论 -
常用Bootstrap工具类(各种按钮/清除浮动/居中对齐)
关闭按钮Bootstrap工具类如果你在自己的项目中引入了alert模块或者modal模块,那么你就会需要用到这个关闭按钮工具类,这个类可以让你方便地关闭这两种模块,具体代码如下:<button type="button" class="close" aria-hidden="true">×下拉按钮Bootstrap工具类如果你要用到二级菜单、下拉框或者转载 2017-01-16 14:34:21 · 14918 阅读 · 0 评论 -
Bootstrap图片样式使用方法
在Bootstrap中自带了几种图片样式,能够让你很快地对其进行使用,这几种样式使用起来相当简单,让我们一起来看看怎么快速调用Bootstrap图片样式。 Bootstrap图片圆角样式在现今的网站建设中,由于扁平化设计的趋势,我们经常会用用到一些CSS3的特性,例如圆角、渐变、阴影等。同样我们也可以用Bootstrap迅速对图片进行圆角设置,代码如下:<img src转载 2017-01-16 14:30:17 · 4407 阅读 · 0 评论 -
Bootstrap按钮元素使用方法
Bootstrap按钮元素样式Bootstrap中,总共提供了六种按钮样式,分别是默认、主要、成功、信息、警告以及危险这几个样式,它们对应的类分别是btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger。对应的颜色分别是白色、深蓝、绿色、浅蓝、橙色以及红色。这几种颜色基本上满足大部分使用需求,当然,如果转载 2017-01-16 14:27:23 · 2251 阅读 · 0 评论 -
Bootstrap表格样式使用方法
基本Bootstrap表格样式Bootstrap最基本的表格样式就是在标签中加入table类,然后在标签内嵌套thead和tbody元素即可。例如:表头表格内容按照这种形式构建的表格是最为基础的。间隔型Bootstrap表格样式这种表格样式是采用不同的tr背景来进行区分,如果想要使用这个样式,需要在table中再加入table-striped类,例如:<table转载 2017-01-16 14:26:31 · 3635 阅读 · 1 评论 -
Bootstrap栅格系统使用方法
如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。 什么是栅格系统栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式,并且通过比例计算来设置你定义的列宽。例如你这一行想要转载 2017-01-16 14:25:12 · 6670 阅读 · 0 评论 -
Bootstrap浏览器兼容性
说到浏览器兼容性,就不得不提国内的浏览器占有率现状,这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack,倘若你想要通过使用Bootstrap来避免这些额外的编码,那你就错了。自从推出了Bootstrap3以后,整个框架对于低级浏览器的兼容性更是不忍直视,所以如果你的项目牵涉到IE8、IE7,甚至是IE6,那么就可以好好考虑是否还要执着于Bootstrap3了(当然,转载 2017-01-16 14:22:54 · 20927 阅读 · 1 评论 -
Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局。移除标签禁用第一步,就是需要移除在head标签中添加的转载 2017-01-16 14:22:09 · 5419 阅读 · 0 评论 -
Bootstrap input元素组使用方法
input元素组基本样式最基本的input元素组样式就是在input元素的左右加入图标或者单位,从而达到一些对应的功能效果。让我们看看应该如何实现这个效果: ¥ <input type="text" class="form-control"> .00以上代码的效果是,在input元素前放入一个元素,从而说明该input是作为人民币的输入框,后面的.00用来说明该金额应该是转载 2017-01-16 17:45:13 · 3528 阅读 · 0 评论