one_way
- 浏览: 15931 次
- 性别:
- 来自: 广州
-
最新评论
文章列表
警告框是一个站点对于我们的操作提供的一个反馈，可以让我们知道自己的操作是否正确或应该如何操作。Bootstrap中有警告框组件，使用时需要jquery警告框插件。警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义，建议使用一种内容类，从成功，消息，警告或危险中任选其一。假如我们想警告框可以关闭，可以用一个可选的alert-dismissable和关闭按钮，同时记住一定要给data-dismiss="alert"z属性用上<button>，即在button中添加该属性。除了警告框以外，进度条也是一种视觉良好的反馈组件。它可以提供工作或动作的实时反馈， ...
当网页内容过多时，我们需要分页显示。Bootstrap中有分页组件，使用pagination类来修饰一个分页。默认的分页实例代码：
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li& ...
每个网站都会有导航，Bootstrap中可用的导航有相似的标记，使用基类.nav开头，这是相似的部分，然后改变修饰类可以改变样式。当使用标签页.nav-tabs，假如要实现切换功能，必须要用到tabs的JS插件。Bootstrap中使用.nav-pills可以创建一个胶囊式标签页，加上.nav-stacked，pill可以竖直堆叠。在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。对任何导航（包含标签页，pills，或列表），加入.disabled使链接为灰色且没有鼠标悬停效果。但是这个类只改变<a& ...
我们在注册或登录时都需要在输入框中输入信息，输入框是我们填写信息，提交给服务器的一个重要元素。Bootstrap中提供了输入框组，用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。为了跨浏览器兼容性，避免使用<select>元素，因为WebKit浏览器不能完全支持它的样式。不要直接将.input-group与.form-group混合使用，因为.input-group是一个独立的组件。另外，给.input-group添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸cla ...
按钮是我们在网页上最常见的一个交互工具，给人一种直观的效果。给按钮添加一些事件，然后触发事件，给页面带来一种动态的效果。Bootstrap可以用一个按钮组来装载一组的按钮把一系列的.btn按钮放入.btn-group，示例代码
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn ...
Bootstrap提供了许多好看的Glyphicons图标。使用的方法也很简单，不过出于性能的考虑，所有图标都需要基类和单独的图标类。Glyphicons图标可以放在按钮，工具栏的按钮组中，导航或输入栏的前面。下面的代码就是在按钮前面放入一个图标装饰：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
我们 ...
表单元素实现用户与WEB服务器交互的功能，是动态WEB技术的重要要素之一。表单接收用户的信息，并把信息提交给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。Bootstrap对这个重要的HTML标签提供了一些修饰类。将label和<input>，<textarea>，<select>这些控件包裹在.form-group中可以获得最好的排列。有时，我们想要表单水平排列。这时可以通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-grou ...
表格是我们展示页面经常用到的标签，bootstrap提供了大量修饰表格的样式。为任意
标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。利用.table-striped可以给之内的每一样增加斑马条纹样式。（而这一功能不被Internet Explorer 8支持。）利用.table-bordered为表格和其中的每个单元格增加边框。利用.table-hover可以让中的每一行响应鼠标悬停状态。利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。通过这些状态类（.active，.success，.warning ...
bootstrap里面提供了修饰引用其他来源内容的标签<blockquote>，将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，建议使用<p>标签。另外，可以通过几个简单的变体就能改变风格和内容例如，添加<small>标签来注明应用来源，来源名称可以放在<cite>标签里面，使用.pull-right可以让引用展现出向右侧移动、对齐的效果。列表是我们在页面常用的标签之一，bootstrap提供了专门移除子元素的列表样式（使用.list-unstyled），也可以让列表水平排列，.dl-horizontal可以 ...
bootstrap提供了许多页面内容排版的修饰类，例如给inline属性文本赋予标题的样式，在标题里还有使用<small>标签或.small类来添加副标题，将全局font-size设置14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。bootstrap提供了各种各样强调样式，例如通过增加font-weight强调一段文本，使用<strong>标签，用斜体强调一段文本，使用<em>标签，通过文本对齐类，可以简单方便的将文字重新对齐。类别有.text-left，.text-center，.text-right，还 ...
bootstrap提供了许多的样式类，里面的样式包括排版、表格、表单等等。bootstrap内置了一套响应式、移动设备优先的流式栅格系统，系统自动最多分为12列。栅格系统的工作原理：1.行（row）必须包含在.container中，以便为其赋予合适的排列（alignment）和内补（padding）。
2.使用行（row）在水平方向创建一组列（column）。
3.你的内容应当放置于列（column）内，而且只有列（column）可以作为行（row）的直接子元素。
4.可以通过预先定义好的网格类，像.row，.col-xs-4等来快速创建栅格布局。
5.通过设置padding从而创建列（colu ...
bootstrap是一个很强大的前端框架，自己已经开始自己学习和使用了一段时间。bootstrap提供了几种简单的快速使用方法，自己就是直接使用bootstrap预先编译好的。bootstrap里面提供了许多的样式，js代码等，其中js是依赖于jquery的，所以在使用前需要jquery插件。所以引入js时要先引入jquery要在bootstrap.js前面。假如要想让页面适应屏幕变化，需要在<head>里面添加<meta name="viewport" content="width=device-width, initial-scale=1.0& ...