`

bootstrap typography

 
阅读更多

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>


 

 

 

 

 

 

 

分享到:
评论

相关推荐

    Bootstrap for Rails (2015)

    Setting up 56 Styling typography 57 Aligning text 61 Text transformation 62 Blockquotes 62 Styling listing elements 64 Creating and styling buttons 67 Which elements are eligible to use Bootstrap's ...

    twitter-bootstrap-typography-demo

    twitter-bootstrap-typography-demo

    Bootstrap for ASP.NET MVC

    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 ...

    Jack Spurlock - 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 ...

    Introducing Bootstrap 4 [Apress, 2016]

    You'll understand how to use Bootstrap 4 for typography, forms, and modules. You'll understand how to structure your page and your code to be optimally efficient. What You'll Learn How to use ...

    Introducing Bootstrap 4(Apress,2016)

    You’ll understand how to use Bootstrap 4 for typography, forms, and modules. You’ll understand how to structure your page and your code to be optimally efficient. What You’ll Learn How to use ...

    Bootstrap 4 responsive web design

    Module 1: Bootstrap 4 By Example Chapter 1: Getting Started 3 Getting Bootstrap 4 Setting up the framework 5 Folder structure 6 Warming up the sample example 6 Bootstrap required tags 8 Building our ...

    Packt.Twitter.Bootstrap.Web.Development.How-To (英文pdf)

    Leverage carefully-built CSS styles for typography, buttons, tables, forms, and more Deploy Bootstrap’s jQuery plugins to create drop-downs, switchable tabs, and an image carousel

    最新Color Admin1.9 - bootstrap3响应后台模板+前端网页模板

    Typography Buttons Tabs & Accordions Unlimited Nav Tabs Widget Boxes Media Object Simple Line Icons Icons Tree Views Language Bar & Icons Form Elements Form Plugins Form Validation Form ...

    Centaurus可定制页面和排版的Bootstrap后台管理系统

    Clean typography Responsive design Built with Bootstrap 3.3+ Well organized and commented code Retina-ready icons – FontAwesome and Halflings Responsive Graphs and charts for all your possible ...

    sublime-bootstrap4:已弃用| 用于Sublime Text 3的Bootstrap 4片段

    sublime-bootstrap4:已弃用| 用于Sublime Text 3的Bootstrap 4片段

    Bootstrap5:该项目基于Bootstrap 5和SASS

    这个项目是关于Bootstrap 5和SASS的 包含main.SCSS fils @import“ utils / _variables”; @import“ utils / _helper”; @import“ utils / _mixins”; @import“ base / _reset”; @import“ base / _...

    sing-app:with使用Bootstrap 4.5构建的免费和开源管理仪表板模板:collision:

    包括响应式布局和使用Bootstrap 4.5构建的高质量UI。 | | | 该存储库包含的有限免费版本。 ,带有后端的 , , 和版本也都可用,并以完整包装形式提供。 免费Vue.js版本可作为 产品特点 使用此模板,您将能够利用...

    HTML5.and.CSS3.Building.Responsive.Websites.pdf

    Use Responsive Grid System, Bootstrap, and Foundation frameworks for responsive web design Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 ...

    ScaleText:响应式网页排版

    ScaleText保留Typography的纵横比,同时仍保持可读性。 人们不再需要编写媒体查询来缩放文本。 ScaleText可以消除网页上任何类型的显示器(无论是智能手机,平板电脑还是笔记本电脑)中的代码异味并动态处理字体...

    H+ 后台主题UI框架v4.1 带文档 未压缩版

    我从官方988元购买的,保证带文档 未压缩; 文件夹和文件结构: Hplus-v.3.0.1/ ├── css/(css文件夹,... ├── typography.html(排版) ├── webim.html(WebIM即时通讯) ├── widgets.html(小部件)

    lesser:使用 Less 设计页面的极简工作流程

    不是预加载所有 Bootstrap 的 CSS 组件,lesser 包括基本元素:网格、排版和强大的 mixin,其余的都放在一边。 针对响应式排版进行了优化,Lesser 还预装了以下插件: 用法 安装较少 bower install lesser 在此...

Global site tag (gtag.js) - Google Analytics