关键词:
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>
bootstrap之css全局样式中的图片
使用BootStrap中的CSS全局样式,我们就可以不用自己定义CSS样式了。响应式图片<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewp 查看详情
bootstrap之css全局样式中的表格
不使用BootStrap之CSS全局样式中的表格,自己也不定义CSS样式<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr>&l 查看详情
第2章排版样式
本节课我们主要学习一下Bootstrap全局CSS样式中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。一.页面排版Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。1.页面主体Bootstrap将全局font-size设置为14px... 查看详情
bootstrap——全局css样式
1.栅格系统containter:用于固定宽度并支持响应式布局的容器container-fluid:用于100%宽度,占据全部视口(viewport)的容器row:行,必须在container或container-fluid之内col-md/xs-*:设置块的列宽col-md/xs-offset-*:列偏移col-md-push/pull:推/拉&n... 查看详情
python学习_day62_前端基础之bootstrap全局css样式
一、布局容器 Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。分别为:<divclass="container">//.container... 查看详情
重修课程day54(bootstrap之css样式)
一bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用。是基于jquery开发的。 使用BootCDN提供的免费CDN加速服务,同时支持http和https协议。CDN是一种前端的优化方式。 jquery的代码放在body标签里面的最下... 查看详情
使用bootstrap怎么制作出这种样式的排版?
新手不会制作样式,希望能给出详细的解答参考技术ABootstrap之页面排版样式Bootstrap是由Twitter公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript的开源框架。该框架代码简洁、视觉优美,可用于快速、简单... 查看详情
javaweb之bootstrap(代码片段)
...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念:一个前端开发的框架ÿ 查看详情
bootstrap框架(代码片段)
... 然后引入一下就能用了,很简单 Bootstrap全局样式 排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。 我们只要在基本的HTML元素上通过设置class就能够应... 查看详情
如何获取bootstrap滚动条的高度
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框、标签页、滚动条、弹出框等),可满足常用开发需要,而且还... 查看详情
bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间。hidden-xs@media(max-width:767px){.hidden-xs{display:none!important;}}@media(max-width:991px)and(min-width:768px){.... 查看详情
[bootstrap入门][全局css样式-概论](代码片段)
[Bootstrap入门][全局CSS样式-概论]标签(空格分隔):未分类移动设备优先为了确保适当的绘制和触屏缩放,需要在之中添加viewport元数据标签。<metaname="viewport"content="width=device-width,initial-scale= 查看详情
修改bootstrap的全局样式,bootstrap3.0是由html5和css3组成的
...更好的字体样式设定,用*就会全部覆盖。 正常引入bootstrap的css样式后,记得将自定义的样式表放到其之后, <linkrel="stylesheet"href="/Public/css/bootstrap.min.css"> <linkrel="stylesheet"hr 查看详情
[bootstrap入门][全局css样式-栅格系统](代码片段)
[Bootstrap入门][全局CSS样式-栅格系统]标签(空格分隔):未分类Bootstrap提供了一套响应式,移动设备优先的流式栅栏系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分配为最多12列。它包含了易于使... 查看详情
全面解析bootstrap排版使用方法(文字样式)
...术A一、段落 段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):1、全局文本字号为14px(font-size)。2、行高为1.42857143(line-height),大约是20px(大家看到一串的... 查看详情
bootstrap之css样式(代码片段)
一、表格 bootstrap3.0规定,为任意<table>标签添加.table类样式,才可以为其赋予优化效果。bootstrap为表格添加了除默认风格外的个性风格。 1.斑马线风格 为表格添加如下样式,为表格添加table-striped样式类,即可实... 查看详情
javascript课程——day24(bootstrap简介全局的css样式组件)
1、bootstrap简介 1.1、什么是bootstrap?来自于Twitter,是目前很受欢迎的前端框架之一2011年8月在GitHub上发布的开源产品是一个用于快速开发web应用程序和网站的前端框架支持响应式布局。(响应式布局指的是一个网站能够兼容多... 查看详情
如何学习bootstrap框架
全局样式1Bootstrap中用到一些HTML元素和CSS属性需要将页面设置为HTML5文档类型,即在页面顶部添加“<!DOCTYPEhtml>”2布局容器:Bootstrap需要为页面内容和栅格系统包裹一个.container或container-fluid(占据全部视口viewport的容器)容... 查看详情