http://twitter.github.com/bootstrap/base-css.html#typography
国内:
http://ninghao.net/bootstrap/components.html
1.
Bootstrap's global default font-size
is 14px, with a line-height
of 20px. This is applied to the <body>
and all paragraphs. In addition, <p>
(paragraphs) receive a bottom margin of half their line-height (10px by default).
缺省font-size:14px line-height 20px bootom-margin:10px
2.Make a paragraph stand out by adding .lead
.
<p class="lead">...</p>
3.Emphasis 强调
三个tag:<small> <strong>(以粗体显示)<em>(以斜体显示)
4.Emphasis classes 文字的颜色区分
如:muted(柔和)、text-warning、text-error、text-info、text-success
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
5.Abbreviations缩写
<abbr title="attribute">attr</abbr> 鼠标移到attr处会显示attribute的解释
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 小字体显示,initialism是词首字母缩略词的意思
6.blockquote引用
7.form
7.1 from-search圆角显示输入框
Add .form-search
to the form and .search-query
to the <input>
for an extra-rounded text input.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
7.2Inline form 不换行显示多个控件
7.3Horizontal form(labe右对齐,控件左对齐)
Add .form-horizontal to the form Wrap labels and controls in .control-group Add .control-label to the label Wrap any associated controls in .controls for proper alignment
例子:http://twitter.github.com/bootstrap/base-css.html#forms
7.4前或后加文字lable+input或在一行
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
分享到:
相关推荐
3. **CSS样式**:Bootstrap的CSS框架包括全局CSS设置、型录(typography)、布局工具、表单控件以及实用的类,帮助开发者快速创建美观的界面。 4. **JavaScript插件**:除了CSS,Bootstrap还包含一系列基于jQuery的...
`bootstrap.css`则是Bootstrap的CSS文件,它定义了Bootstrap的样式规则,包括栅格系统(grid system)、排版(typography)、表单(forms)、按钮(buttons)、表(tables)、图像(images)、代码(code)以及各种...
5. ** Typography 和 Grid System**:Bootstrap提供了统一的排版样式和强大的栅格系统。栅格系统帮助开发者创建灵活的布局,而良好的排版则确保内容清晰易读。 6. **Jumbotron 和 Carousel**:Jumbotron是Bootstrap...
5. **排版(Typography)**:Bootstrap 3 提供了一系列的文本样式和排版工具,如h1到h6的标题、段落、强调文本、引用等。 6. **图标(Glyphicons)**:Bootstrap 3 包含一套基本的图标集,可以方便地插入到网页中,...
"twitter-bootstrap-typography-demo"是基于这个框架的一个排版设计的实战演示,旨在展示如何利用Bootstrap来实现美观且易读的文本样式。 Bootstrap的核心之一就是其强大的排版系统,它包括了一系列用于控制字体、...
8. **排版(Typography)**:Bootstrap提供了统一的排版样式,包括字体、行高、段落间距等,以确保一致的视觉体验。此外,还有对标题(Headings)、引用(Blockquotes)、列表(Lists)等的预设样式。 9. **辅助类...
3. **样式和字体**:Bootstrap包含了一套全面的CSS样式,如排版(typography)、颜色方案、按钮样式、表格(tables)、图像(images)和代码高亮(code)。此外,它还集成了Google的Open Sans和Glyphicons字体库,...
4. ** Typography**:Bootstrap 4内置了丰富的排版样式,包括字体、标题、段落、引用等,确保文本在各种设备上都能保持一致的视觉效果。 5. **颜色系统**:Bootstrap 4定义了一系列色彩变量,用于按钮、链接、警告...
5. ** Typography**:Bootstrap提供了统一的排版样式,包括字体、行高、颜色等,确保整个网站的视觉一致性。 6. **图标集**:Bootstrap通常与Font Awesome等图标库结合使用,提供大量的矢量图标,用于增强界面的...
3. **样式**:Bootstrap的CSS样式包括了全局的HTML元素样式、可自定义的排版(typography)、颜色方案以及间距(spacing)规则,确保了整体设计的一致性。 4. **JavaScript插件**:Bootstrap的一些组件依赖于...
Bootstrap, a leading open source frontend framework, takes care of typography, form layouts, and user interface components, allowing a developer to focus on writing code. Integrating ASP.NET's ...
8. `typography.html`:可能包括字体、排版和文本相关样式。 9. `gallery.html`:可能是图片画廊的示例,利用Bootstrap的响应式布局展示图像。 10. `chart.html`:可能使用了图表库(如Chart.js或Highcharts)与...
5. ** Typography 和 样式**:Bootstrap 提供了一套清晰的排版指南和基础样式,包括字体、颜色、间距、边距等,确保了设计的一致性。 6. **可视化布局系统**:提到的“可视化布局系统”可能指的是Bootstrap的网格...
Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. This practical book gets you started building pages with Bootstrap’s ...
5. **改进的 Typography**:优化了排版样式,提供更好的可读性和一致性。 6. **更强的辅助类**:添加了更多的实用辅助类,便于快速实现常见样式调整。 在AxureRP8中使用Bootstrap4元件库,用户可以: 1. **导入...
5. ** Typography**:Bootstrap包含了统一的排版样式,如字体、行高、对齐方式等,使得文档内容易于阅读。 6. **图标库**:Bootstrap自带一套Glyphicons图标集,提供大量的矢量图标供开发者使用,增强界面视觉效果...
6. ** Typography 和 样式**:Bootstrap提供了统一的排版、标题、段落、引用等文本样式,以及表格、图像、代码等元素的样式,保持了整体设计的一致性。 7. **无障碍支持**:Bootstrap遵循Web内容可访问性指南(WCAG...
9. **辅助类(Helper classes)**:Bootstrap提供了一系列辅助类,如排版类(typography helpers)、颜色类(color utilities)和间距类(spacing utilities),可以帮助开发者快速调整元素样式。 10. **CSS样式**...