按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。 //btn源码 .btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: ...
本文大家分享了Bootstrap CSS布局之图像，供大家参考，具体内容如下 img-rounded、img-circle、img-thumbnail(缩放图模式) //源码 img {vertical-align: middle; } .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {display: block;max-width: 100%;height: auto; } .img-rounded {border-radius: 6px; } //缩略图模式 .img-thumbnail {display: inlin...
在设计网页布局的时候，经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。 源码中可以看出： 如果jumbotron放在container样式内，则显示圆角;如果不放在里边，则不会显示圆角。 <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗...
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。 //源码 .pagination {display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px; } .pagination > li {display: inline; } .pagination > li > a, .pagination > li > span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;backgroun...
面包屑breadcrumb一般用于导航，表示当前页面所在的位置 面包屑可以设置其他相关的小标记内容，比如标签、徽章标记等。 //源码 //基础样式 .breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px; } //所有li项都是内联块方式 .breadcrumb > li {display: inline-block; } //并且li项才起作用 .breadcrumb > li + li:before {padding: 0 5px;color: #ccc;content: ...
本文实例为大家分享了Bootstrap导航的具体代码，供大家参考，具体内容如下 //源码 .nav {padding-left: 0;margin-bottom: 0;list-style: none; } .nav > li {position: relative;display: block; } .nav > li > a {position: relative;display: block;padding: 10px 15px; } .nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: #eee; } .nav > li.disabled > a {color: #777; } .nav > li.disabl...
本文主要大家分享了响应式导航条的具体代码，供大家参考，具体内容如下1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮，文本，链接navbar-btn、bavbar-text、navbar-link 4.导航条中的项目进行左右浮动navbar-left、navbar-right 5.顶部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom ...
.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮，可以使用button元素，也可以使用a元素，产生的效果是一样的。 容器的多个分组以table风格进行显示，每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{display:table;content:" "; } .btn-toolbar:after{clear:both; }.btn-toolbar {margin-left: ...
按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果，就类似于单击一个button按钮，然后显示隐藏的下拉菜单。 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码，css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu...
本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下 了解table-cell的表格width设置为1%的原因。 http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。 input-group(input-group-xs,input-group-sm,input-group-lg)、input-group-addon、fo...
1.整体架构BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计 1.1 CSS12栅格系统 12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。 1.1.1 实现原理 栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制作出强大响应式的栅格系统。1.最外层的边框，伴...
bootstrap三大核心之二。 包括glyphicon图标，下拉菜单（dropdown），按钮组（button group）....等等。一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden="true" .sr-only（只读） 1. 引入方法：<i class="glyphicon glyphicon-search"></i> i标签是已经废弃了的html斜体标签。用span也可以。使用时必须基于glyphiconglyphicon-xxx两个类的样式。 2. 实现机制： （1）雪碧技术：允许无损放大，...
最近的一个项目 前台使用了 bootstrap.css + angularjs， 后台只处理数据（用的php，处理结果直接 json_encode($arr)，非常爽）。一直在Chrome的仿真机测试非常完美， 没有进行真机测试。完成后，到手机测试时傻了，左右滑动页面时，竟然出现了一个 空白的竖条（如下图所示）。判断是margin-right 设置的长度所致，检查css，并没有相关代码。看来问题出现在了 bootstrap 。虽然不影响 程序的使用，但是感觉非常别扭，一定要修复它。...
今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在之前的文章中阅读。 一、导航组件 自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到js的插件，所以这里不在描述。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"...
由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。 一、bootstrap是什么？ bs是什么? 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。 怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。 bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。下载地址：https://github.com/foreverj...