Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章《html的文本元素总结》,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。

.small——当前元素字体大小的 85%,常用作副标题时,也可用<small>来代替;

.lead——让段落突出显示;

.text-left、.text-center、.text-right——将文字于左、居中、于右对齐;

.text-lowercase、.text-uppercase、.text-capitalize——分别对应:所有字母大写、所有字母小写、首字母大写;

.blockquote-reverse——让引用呈现内容右对齐;

.list-unstyled——设置列表为无样式;

.list-inline——设置列表元素放置于同一行,并添加少量的内补(padding);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS全局样式排版</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
    <h1>欢迎访问远地资产</h1>
    <h2>欢迎访问远地资产</h2>
    <h3>欢迎访问远地资产</h3>
    <h4>欢迎访问远地资产<small>你可信赖的理财伙伴</small></h4>
    <p>宏运球迷赛后狂骂郜林及其太太 <abbr title="广州恒大前锋">郜林</abbr>扔鞋反击</p>
    <p class="lead">宏运球迷赛后狂骂郜林及其太太 郜林扔鞋反击</p>
    <p>宏运球迷赛后狂骂郜林及其太太 <mark>郜林</mark>扔鞋反击</p>
    <p class="text-left">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
    <p class="text-center">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
    <p class="text-right">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
    <p class="text-lowercase">AHALjjls</p>
    <p class="text-uppercase">AHALjjls</p>
    <p class="text-capitalize">fkdla</p>
    <address>
        <strong>远地资产</strong><br/>
        上海市,黄浦区<br/>
        西藏中路725弄12号3楼<br/>
        <abbr title="电话">P:</abbr>(021) 6553 2332
    </address>
    <blockquote class="blockquote-reverse">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    <ul class="list-unstyled">
        <li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
        <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
        <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
    </ul>
    <ul class="list-inline">
        <li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
        <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
        <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
    </ul>
</div>

</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-20 20:25:57

Bootstrap全局CSS样式之排版的相关文章

bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应

2.Bootstrap 全局CSS样式和字体图标

一.全局CSS样式 1.html5文档类型,标准,参照下面的进行设置 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.移动设备优先 bootstrap是移动设备优先的! 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签. <meta name="viewport" content="width=device-width

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

Bootstrap全局CSS样式之按钮和图片

.btn-default--按钮的默认样式: .btn-primary--按钮的首选样式: .btn-success--按钮的成功样式: .btn-info--按钮的一般信息样式:' .btn-warning--按钮的警告样式: .btn-danger--按钮的危险样式: .btn-link--按钮的链接样式: .btn-lg--大按钮样式: .btn-sm--小按钮样式: .btn-xs--超小按钮样式: .btn-block--将按钮设置为充满父元素: .active--设置按钮为激活状态:

Bootstrap全局CSS样式之栅格系统

.col-xs-*--栅格列,适用于手机(<768px); .col-sm-*--栅格列,适用于平板(≥768px); .col-md-*--栅格列,适用于桌面显示器 (≥992px): .col-lg-*--栅格列,适用于大桌面显示器(≥1200px): .col-md-offset-*--向右偏移列: .col-md-push-*..col-md-pull-*--改变列的排序: <!DOCTYPE html> <html lang="en"> <

Bootstrap全局CSS样式之表格

.table--基础表格样式: .table-striped--给<tbody>之内的每一行增加斑马条纹样式: .table-bordered--为表格增加边框: .table-hover--为<tbody>之内的每一行作悬停效果: .table-condensed--让表格更加紧凑,单元格中的内补(padding)均会减半. .active--鼠标悬停在行或单元格上时所设置的颜色: .success--标识成功或积极的动作: .info--标识普通的提示信息或动作: .warni

Bootstrap全局CSS样式之表单

.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%: .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时: .sr-only--将label标签隐藏: .help-block--用于设置提示文本: .form-horizontal--可以将label标签和控件组水平并排布局: .radio-inline..checkbox-inline-

bootstrap全局css样式

以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ .hidden-xs { display: none!important; } } @media (max-width: 991px) and (min-width: 768px){ .hidden-sm { display: none!important; } } @media (min-widt

Bootstrap——全局CSS样式

1.栅格系统 containter:用于固定宽度并支持响应式布局的容器 container-fluid:用于100%宽度,占据全部视口(viewport)的容器 row:行,必须在container或container-fluid之内 col-md/xs-*:设置块的列宽 col-md/xs-offset-*:列偏移 col-md-push/pull:推/拉 2.排版 <h1><h6>:尺寸 <small>:副标题 <p></p>:段落 lead