一、输入框input单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式不出错，需要添加类名“.form-control”。二、下拉选择框selectBootstrap框架中的...
一、多标签支持 一般制作按钮除了使用标签元素之外，还可以使用和标签等。 同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“.btn”。button标签按钮a标签按钮 span标签按钮 div标签按钮二、定制风格在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。基础按钮.btn 默认按钮.btn-default 主要按钮.btn-primary 成...
这篇文章全面解析了Bootstrap表单的使用方法，本文重点介绍Bootstrap表单控件状态的三种情况，感兴趣的小伙伴们可以参考一下一、焦点状态 焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。<form role="form" class="form-horizontal"><p class="form-group"><p class="col-xs-6"><input class="form-control input-lg" type="text" placeholder="不是焦点状...
一、基础表单表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999 二、水平表单 Bootstrap框架默...
一、段落段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）： 1、全局文本字号为14px(font-size)。 2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。 3、颜色为深灰色（#333）； 二、文字样式在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理...
Bootstrap和普通的HTML页面一样，定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：Bootstrap标题一 Bootstrap标题二 Bootstrap标题三 Bootstrap标题四 Bootstrap标题五 Bootstrap标题六 Bootstrap标题一 Bootstrap标题二 Bootstrap标题三 Bootstrap标题四 Bootstrap标题五 Bootstrap标题六效果如下：除此之外，我们在Web的制作中，常常会碰到在一个...
一. 结构分析 Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：? 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮? 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容? 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮Close模态弹出窗标题模态弹出窗主体内容关闭保...
一 . 结构分析 一个轮播图片主要包括三个部分：? 轮播的图片? 轮播图片的计数器? 轮播图片的控制器 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。代码如下: 第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一...
触发手风琴可以通过自定义的data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。 第一步，设计一个面板组合，里面有三个折叠区：第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。标题一折叠区内容...第三步，为了把标题和内容区捆绑在一起，可以通过锚链...
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.这是Bootstrap Tree View在git上的简介。 注意simple、elegant，简单而优雅，我喜欢这两个词。 那么今天的实例是通过Bootstrap Tree View来制作一款省市级菜单的应用。 一、效果图 二、应用 ①、首先，项目需要引入bootstrap.css、jquery.js、bootstrap-treevi...
原理解析 1.定义一无序列表。取id值为myTab。 2.定义列表中a标签的目标地址为我们要展示的div对应的id 3.为a标签注册对应的事件（就是js的代码） 效果如图 代码如下 html代码部分<ul id="myTab" class="nav nav-tabs"><li role="presentation" class="active"><a href="#home" rel="external nofollow" data-toggle="tab">首页</a></li><li role="presentation"><a href="#profile" rel="external nofollow" >介绍</a></li><li ro...
一.模态框的正常点击出现，如添加功能 <td width="120px"><button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模态框 --> </aside><div class="modal fade" id="systemAdd" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header modal-header-blue"><button type="button" class="close" da...
栅格系统 1、栅格系统介绍 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 Bootstrap的栅格系统，由一个行(.row)和多个列构成。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的网页布局中。具体的数据(文字、图片等都可以)放入列当中。 注意：栅格系统，必须放在.container（固定宽度）或.con...
滚动监控器 1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。 这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。 滚动监控器–滚动监控器的设计 第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。这里以加载合并好的js为例： <script src="https://ajax.googleapis.c...
警告框（Alert）消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。 警告框（Alert） 样式文件： LESS版本:源文件 alerts.less 警告框–结构与样式 <div class="alert alert-success" role="alert"><button class="close" data-dismiss="alert" type="button" ></button><p>恭喜您操作成功！</p> </div>警告框–使用声明式触发警告框 击X会关...