首页
论坛
官方网站
English
跳转至:
导航
,
搜索
查看“BootStrap Typography”的源代码
←
BootStrap Typography
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
__NOTOC__ <div class="col-md-4 pull-right"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Font Colours</h3> </div> <div class="panel-body"> <p></p> <p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-success">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-info">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-warning">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-danger">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cyanide">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-meadow">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cocktail">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hearts">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-party">Nullam id dolor id nibh ultricies vehicula.</div></p> </div> </div> </div> <div class="col-md-8 pull-left"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Font Colour Mark up</h3> </div> <div class="panel-body"> <div class="bs-example"> <p>As with most of the styles, colours can be applied to fonts too.</p> <pre> <p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-success">Nullam id dolor id nibh ultricies vehicula..</div></p> <p><div class="text-info">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-warning">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-danger">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cyanide">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-meadow">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cocktail">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hearts">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-party">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hollow">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-mango">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-berry">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p> </pre> </div> </div> </div> </div> <div class="column clearfix"> <div class="col-md-12"> </div> </div> <div class="column clearfix"> <div class="col-md-4 pull-right"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Highlighting</h3> </div> <div class="panel-body"> <p></p> <p><div class="text-primary-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-success-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-info-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-warning-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-danger-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cyanide-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-meadow-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cocktail-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hearts-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-party-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> </div> </div> </div> <div class="col-md-8 pull-left"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Highlight Mark up</h3> </div> <div class="panel-body"> <pre> <p><div class="text-primary-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-success-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-info-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-warning-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-danger-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cyanide-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-meadow-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-cocktail-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hearts-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-party-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-midnight-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-concrete-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-hollow-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-mango-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-berry-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> <p><div class="text-primary-alt">Nullam id dolor id nibh ultricies vehicula.</div></p> </pre> </div> </div> </div> <div class="column clearfix"> <div class="col-md-12"> </div> </div> <div class="column clearfix"> <div class="col-md-4 pull-right"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Contextual</h3> </div> <div class="panel-body"> <p></p> <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-dark">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-darker">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-light">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-lighter">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-danger">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-cyanide">Nullam id dolor id nibh ultricies vehicula.</p> </div> </div> </div> <div class="col-md-8 pull-left"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Contextual Mark up</h3> </div> <div class="panel-body"> <pre> <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-dark">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-darker">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-light">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-lighter">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-neutral">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-success">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-info">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-warning">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-danger">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-cyanide">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-meadow">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-cocktail">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-mango">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-berry">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-hearts">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-party">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-midnight">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-concrete">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-gunmetal">Nullam id dolor id nibh ultricies vehicula.</p> <p class="bg-hollow">Nullam id dolor id nibh ultricies vehicula.</p> </pre> </div> </div> </div> </div> <div class="column clearfix"> <div class="col-md-12"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Header Styles</h3> </div> <div class="panel-body"> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-color-default"></h1></pre> <h1 class="mwbs-color-default">H1 Default</h1> <h2 class="mwbs-color-default">H2 Default</h2> <h3 class="mwbs-color-default">H3 Default</h3> <h4 class="mwbs-color-default">H4 Default</h4> <h5 class="mwbs-color-default">H5 Default</h5> </div> </div> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-color-dark"></h1></pre> <h1 class="mwbs-color-dark">H1 Dark</h1> <h2 class="mwbs-color-dark">H2 Dark</h2> <h3 class="mwbs-color-dark">H3 Dark</h3> <h4 class="mwbs-color-dark">H4 Dark</h4> <h5 class="mwbs-color-dark">H5 Dark</h5> </div> </div> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-color-light"></h1></pre> <h1 class="mwbs-color-light">H1 Light</h1> <h2 class="mwbs-color-light">H2 Light</h2> <h3 class="mwbs-color-light">H3 Light</h3> <h4 class="mwbs-color-light">H4 Light</h4> <h5 class="mwbs-color-light">H5 Light</h5> </div> </div> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-font-100"></h1></pre> <h1 class="mwbs-font-100">H1 Font 100</h1> <h2 class="mwbs-font-100">H2 Font 100</h2> <h3 class="mwbs-font-100">H3 Font 100</h3> <h4 class="mwbs-font-100">H4 Font 100</h4> <h5 class="mwbs-font-100">H5 Font 100</h5> </div> </div> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-font-300"></h1></pre> <h1 class="mwbs-font-300">H1 Font 300</h1> <h2 class="mwbs-font-300">H2 Font 300</h2> <h3 class="mwbs-font-300">H3 Font 300</h3> <h4 class="mwbs-font-300">H4 Font 300</h4> <h5 class="mwbs-font-300">H5 Font 300</h5> </div> </div> <div class="col-md-4"> <div class="bs-example"> <pre><h1 class="mwbs-font-700"></h1></pre> <h1 class="mwbs-font-700">H1 Font 700</h1> <h2 class="mwbs-font-700">H2 Font 700</h2> <h3 class="mwbs-font-700">H3 Font 700</h3> <h4 class="mwbs-font-700">H4 Font 700</h4> <h5 class="mwbs-font-700">H5 Font 700</h5> </div> </div> </div> </div> </div> <div class="column clearfix"> <div class="col-md-12"> <div class="panel panel-primary-light-border"> <div class="panel-heading"> <h3 class="panel-title">Other Classes</h3> </div> <div class="panel-body"> <p class="lead">Lead Class</p> <p><mark>highlighted mark class</mark></p> <p><del>Deleted del class</del></p> <p><u>Underlined u class</u></p> <p><small>small class</small></p> <p><strong>Bold strong text</strong></p> <p><em>Italic em class</em></p> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> <blockquote><p>blockquote class</p></blockquote> <pre> <p class="lead">Lead Class</p> <p><mark>highlighted mark class</mark></p> <p><del>Deleted del class</del></p> <p><u>Underlined u class</u></p> <p><small>small class</small></p> <p><strong>Bold strong text</strong></p> <p><em>Italic em class</em></p> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> <p><blockquote>blockquote class</blockquote></p> </pre> </div> </div> </div>
返回至
BootStrap Typography
。