描述 《BootStrap开发技术》课程标准.doc 《bootstrap》课程标准 教研室主任: 专业带头人:系(部)主任:教务处处长: 教学副院长: 审核批准日期: 二○一七年五月
《bootstrap》课程标准 (基本信息) 课程编码: 课程类别:专业方向课程 适应专业:网页设计 开设时间:大三上期 学时数:56学时 一、课程概述 (一)课程性质 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和Bootstrap 插件几个部分。每个部分都包含了与该主题相关的
简单有用的实例。 (二)课程基本理念 本课程通过企业项目开发流程为情景,学习并掌握BootStrap 开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力,可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业 开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式,并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式,提高学生职业技能,最终实现岗位无缝对接。 (三)课程的设置与设计思路 本课程立足于培养学生的动手实践能力,教学活动基本上围绕着职业导向而进行,对课程内容的选择标准进行创造性的根本改革,打破以书本知识传授为主要特征的传统学科课程模式,转变为以工作情景任务为中心组织课程内容和实施课程教学,让学生在完成具体项目的过程中发展职业能力并掌握相关理论知识,真正做到学以致用,从而发展职业能力。 本课程的框架结构,经过与企业专家系统的讨论分析,按实际需要及由简入繁的原则,最终确定了学习培养标准。最终达到掌握BootStrap主流框架的目标,本课程共80课时,其中实践50课时。
BootStrap入门教程 本作品由VentLam创作,采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。 BootStrap入门教程(一) 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。如下图所示: https://https://www.sodocs.net/doc/2911410355.html,/ http://www.fleetio.co m/
GitHub上这样介绍bootstrap:简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等。本系列教程遵循官方文档结构来介绍bootstrap,包括手脚架(Scaffolding),基础CSS,组件,javascript插件,使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding. Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding. 全局样式(Global Style).Bootstrap要求html5的文件类型,所以必须在每个使用bootstrap页面的开头都引用: ...
Bootstrap笔试题教程文件 一、单选题(针对以下题目,请选择最符合题目要求的答案。针对每一道题目,所有答案都选对,则该题得分,所选答案错误或不能选出所有答案,则该题不得分。每题2.5分,共80分。) 1. Bootstrap 插件全部依赖是() A.JavaScript B.JQuery C.Angular JS D.Node JS 2. 栅格系统小屏幕使用的类前缀是() A. .col-xs- B. .col-sm- C. .col-md- D. .col-lg- 3. 如下代码中,想要在超小屏幕和小屏幕显示两列,在中屏幕和大屏幕显示三列,三个div的class正确的写法是()
A. col-sm-6 col-md-4,col-sm-6 col-md-4,col-sm-6 col-md-4
B. col-sm-6 col-lg-4,col-sm-6 col-lg-4,col-sm-6 col-lg-4 C. col-xs-6 col-lg-4,col-xs-6 col-lg-4,col-xs-6 col-lg-4 D. col-xs-6 col-md-4,col-xs-6 col-md-4,col-xs-6 col-md-4 4. 下面可以实现列偏移的类是() A..col-md-offset-* B. .col-md-push-* C. .col-md-pull-* D. .col-md-move-* 5.表单元素要加上什么类,才能给表单添加圆角属性,和阴影效果() A.form-group B.form-horizontal C.form-inline D. form-control 6.img-responsive类可以让图片支持响应式布局,它的实现原理是() A.设置了max-width: 100%;和height: auto; B. 设置了max-width: 100%; 和height: 100%; C. 设置了width: auto; 和max-height: 100%; D. 设置了width: auto; 和height: auto; 7.输入框组想加上图标,可以实现对表单控件的扩展的类是() A. .input-group-btn B. .input-group-addon
Bootstrap简易使用指南 Bootstrap简易使用指南 看完使用手册后所作的笔记,可以当做简易使用指南使用。 1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套,提供了四种响应式方案 1.3流动栅格系统 基于百分比,将row改为row-fluid即可使用,内嵌注意宽度是按照父列的百分比进行计算的 1.4自定义栅格 于variables.css中改变变量,默认列12,宽60px,间隔20px,要保证响应性还得修改responsive.less中内容 1.5布局 container为940px居中,container-fluid则为流体布局 1.6 响应式设计 responsive.less中提供了一组media query: 智能手机《=480px;流式列,非固定宽度 垂直平板《=767px;流式列,非固定宽度 水平平板》=768px;42px 20px
默认》=980px;? ? ?60px ?20px 大分辨率》=1200px;70px 30px 要求添加meta标签, 有诸如.visible-phone等支持类 2.基础CSS 2.1 排版 整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量; 强调:string加粗,em倾斜,abbr缩写【title属性存放显示信息,.initialism会减小缩略词字体】,address【使用br换行】 引用:blockquote【cite属性存放来源URL,.pull-left或right决定内容居左右】,small用于引言作者【会在内容前加入破折号】 列表:ul无序号有黑点,ul.unstyled无样式,ol有数字序号,dl描述,dl.dl-horizontal水平描述 2.2代码 code行级代码,pre块级【<>需要转义,.pre-scrollable可以设置350px最大高度】,应用.prettyprint和.linenums来美化代码【使用google prettify】 2.3表格 table thead【tr】tbody【tr】tr【td或th】th【必须在thead之内】caption; .table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半几个可以组合使用 2.4表单 四种表单:.form-vertical【2.0后默认,控件标签文字左对齐】.form-inline【左对齐,控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动,标签与控件居于同
BootStrap开发技术课程标准.doc v1.0可编辑可修改《b ootstrap 》课程标准 教研室主任: 专业带头人: 系 ( 部) 主任: 教务处处长: 教学副院长: 审核批准日期: 二○一七年五月 《 bootstrap》课程标准 (基本信息)
v1.0可编辑可修改 课程编码: 课程类别:专业方向课程 适应专业:网页设计 开设时间:大三上期 学时数: 56 学时 一、课程概述 (一)课程性质 Bootstrap ,来自 Twitter ,是目前最受欢迎的前端框架。 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap 是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。 (二)课程基本理念 本课程通过企业项目开发流程为情景,学习并掌握 BootStrap 开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力,可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化” 、模式“前瞻化” 、教材“权威化”、授课“案例化”等国内领先的 IT 工程师培养模式,并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式,提高学生职业技能,最终实现岗位无缝对接。 (三)课程的设置与设计思路 本课程立足于培养学生的动手实践能力,教学活动基本上围绕着
《Bootstrap响应式应用技术》课程教学大纲 《Bootstrap响应式应用技术》教学大纲 一、课程目的 本课程侧重于介绍Bootstrap框架的基础知识及开发技能。随着Web开发技术的发展,以及用户对应用体验的要求日益提高,致使开发一个web应用时,不仅仅考虑其功能是否足够完备,更重要的是考虑如何才能提高用户体验。这是理性的回归,同时也是Web开发的必然趋势,而Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。因此,Bootstrap也成为了Web开发学习之路上所必需掌握的技能。 二、课程性质和任务 本课程通过企业项目开发流程为情景,学习并掌握Bootstrap开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力,可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式,并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式,提高学生职业技能,最终实现岗位无缝对接。 三、教学要求 本课程的框架结构,经过与企业专家系统的讨论分析,按实际需要及由简入繁的原则,最终确定了学习培养标准。最终达到掌握Bootstrap框架的目标,故应特别注重应用能力的培养。具体要求如下: ●能够熟练使用CSS3结合HTML5实现网页布局; ●熟练使用jQuery实现交互式操作; ●熟练使用Bootstrap CSS基于页面的相关设置; ●熟练使用Bootstrap CSS响应式辅助; ●熟悉使用Bootstrap常用字体图标的运用; ●熟练使用Bootstrap布局组件运用; ●熟练使用Bootstrap布局组件分页及徽章的合理运用; ●熟练使用Bootstrap布局组件进度条及面板运用; ●熟练使用Bootstrap插件的相关运用; ●熟练使用Bootstrap滚动监听;
bootstrap中文手册指南 Bootstrap简易指南 看完使用手册后所作的笔记,可以当做简易使用指南使用。 1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套,提供了四种响应式方案 1.3流动栅格系统 基于百分比,将row改为row-fluid即可使用,内嵌注意宽度是按照父列的百分比进行计算的 1.4自定义栅格 于variables.css中改变变量,默认列12,宽60px,间隔20px,要保证响应性还得修改responsive.less中内容 1.5布局 container为940px居中,container-fluid则为流体布局 1.6 响应式设计 responsive.less中提供了一组media query:
智能手机《=480px;流式列,非固定宽度 垂直平板《=767px;流式列,非固定宽度 水平平板》=768px;42px 20px 默认》=980px;? ? ?60px ?20px 大分辨率》=1200px;70px 30px 要求添加meta标签, 有诸如.visible-phone等支持类 2.基础CSS 2.1 排版 整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量; 强调:string加粗,em倾斜,abbr缩写【title属性存放显示信息,.initialism会减小缩略词字体】,address【使用br换行】 引用:blockquote【cite属性存放来源URL,.pull-left或right决定内容居左右】,small用于引言作者【会在内容前加入破折号】 列表:ul无序号有黑点,ul.unstyled无样式,ol有数字序号,dl描述,dl.dl-horizontal水平描述 2.2代码 code行级代码,pre块级【<>需要转义,.pre-scrollable可以设置350px最大高度】,应用.prettyprint和.linenums来美化代码【使用google prettify】
Bootstrap前端框架 Bootstrap 标题(一) Bootstrap和普通的HTML页面一样,定义标题都是使用标签
到,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: 通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置: 1、重新设置了margin-top和margin-bottom的值,h1~h3重置后的值都是20px;h4 ~h6重置后的值都是10px。 2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。 3、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px 和h6=12px。 标题(二) 除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了标签来制作副标题。这个副标题具有其自己的一些独特样式: 1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。 2、由于内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h 6内的字号都设置为当前字号的75%; 详细代码请参阅bootstrap.css文件中第407行~第443行。 段落(正文文本)
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1、全局文本字号为14px(font-size)。 2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。 3、颜色为深灰色(#333); 4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family),或许这样的字体对我们中文并不太合适,但在实际项目中,大家可以根据自己的需求进行重置,在此我们不做过多阐述,我们回到这里。该设置都定义在
元素上,由于这几个属性都是继承属性,所以Web页面中文本(包括段落p元素)如无重置都会具有这些样式效果。 /*源码请查看bootstrap.css文件中第274行~280行*/ 另外在Bootstrap中,为了让段落p元素之间具有一定的间距,便于用户阅读文本,特意设置了p元素的margin值(默认情况之下,p元素具有一个上下外边距,并且保持一个行高的高度): /*源码请查看bootstrap.css文件中第467行~469行*/ 如果你对CSS预处理器有所了解,那么你完全可以根据Bootstrap提供的预编译版本LES S(或者Sass)进行自定义排版设置。在Bootstrap中,排版设置的默认值都存在variables. less文件中(Sass版本存在_variables.scss中)的两个变量: LESS版本: Sass版本:
个人学习总结-BootStrap入门教程 注明:该文档由本人整理于2013年12月8日 Bootstrap中文参考网站:https://www.sodocs.net/doc/2911410355.html,/ BootStrap最新版源码下载:https://www.sodocs.net/doc/2911410355.html,/ 官网下载的Bootrsap源码包含下列文件: 构建bootstrap基础网页(可以作为网页的基础模板,以后直接复制过去,然后就可以使用bootstrap定义好的相关标签等等) 如图1-1所示: 图1-1 说明: 1) 使用来修复网页在移动设备上显示的问题 2) 这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理 4)在head中的bootstrap-responsive.css是非必须文件,可以不引入,这个文件的主要作用是做一个响应式的网页。 5)在网页中bootstrap.css是bootstrap中的样式文件,bootstrap.js是脚本文件,两个文件相互对应,引入的顺序和位置一般是:CSS文件在head标签中引入,js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。 6)Bootstrap是基于HTML5网页的,所以首先要建立一个HTML5类型的网页 做完以上的操作就建好了一个基本的bootstrap网页了,然后就可以在body里面使用bootstrap中定义好的各种好看的样式。 简要说明 在Bootstrap中,网页按照十二栏的布局分布,在div中通过span类可以定义该div块占据多少栏,span1~span12可以选择。如下图1-2所示:
前端入门三步骤 前端入门三步骤 一、html+css部分 这部分特别简单,到网上搜资料,书籍视频非常多。css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易。最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多,建议在实践中多多积累。 二、JavaScript部分。 1.基础学习: 难点,也是重点,要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,有很多比较抽象的概念,必须要深入理解,比如闭包、原型、面向对象、封装等,要理解透彻。看书是必不可少的,找一本优秀的js书从头到尾,反复研究学习,第一遍可以快速翻阅,大体知道了解概念即可,第二三遍就需要深入学习了。另外,js面向对象编程必须要学习,非常重要,个人推荐一本书,Stoyan Stefanov著,凌杰译的《javascript 面向对象指南》。边学边练,实践出真知。 2.jQuery学习: 这些基础知识掌握好之后,还需要学jQuery,这是一个非常优秀的Javascript库,大型开发必备。它简化了Javascript的复杂操作,消除了Javascript跨平台兼容问题,提供了大量实用
方法,有良好的文档和帮助手册,是一个非常成熟的Javascript库。 3.进阶学习: 有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:易维护,可测试,高性能,低流量(移动端) 三、中高级前端 1.工具学习: 大型项目中,前端代码构建已经不是简单的压缩一下了,依赖管理、模块合并、各种编译步步不可缺少,需要学会使用grunt、gulp等前端构建工具,要学习的还有:包管理器bower、npm,代码优化CSS Lint、JSHint、JSLint,CSS预处理器less、sass,代码管理及版本控制svn、Git,web 框架/服务器Node、Express,代码规范、HTML模块化、css模块化。 2.布局框架学习如Bootstrap. 3.新技术html5学习。 4.js框架学习,requireJS、AngularJS等,往前端架构师靠近。 5.nodejs学习。
bootstrap实战笔记 Bootstrap框架实战笔记 使用bootstrap框架必须,先引入框架文件: bootstrap 布局方式是将页面分成一行12个列,同时布局要放到盒子类container 里面,类row 代码的是行,而类span代表的是列。 例如:
响应式位移: offse数字,例如offset4 就标签距离左边4个列的宽度距离。 代码案例:
此代码表示占用两个列的宽度,距离左边是4个列的宽度 响应式布局的使用类: .visible-phone:在手机上显示这个元素 .visible-tablet:在平板电脑上显示这个元素 .visible-desktop:在普通电脑上显示这个元素 .hidden-phone :在手机上隐藏这个元素 .hidden-tablet:在平板电脑上隐藏这个元素 .hidden-desktop:在普通电脑上隐藏这个元素
:段落标签
到:文章标题 :加粗标签 :标注提示标签 :斜体 :引用说明 文字内容 :左对齐显示文字内容 文字内容 :又对齐显示文字内容 :小字体 Bootstrap Well Well 是一种会引起内容凹陷显示或插图效果的容器。为了创建Well,只需要简单地把内容放在带有class .well 的
中即可。下面的实例演示了一个默认的Well: 代码案例:
您好,我在Well 中!
您可以使用可选类 well-lg 或 well-sm 来改变Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。代码案例:
您好,我在Well 中!
您好,我在Well 中!
响应是布局常用列表: 无序列表:ul 有序列表:ol 分类列表:dl 注意:dl列表里bootstrap提供了一个类dl-horizontal 能改变dl原有的样式bootstrap里面的 code标签:加重注释,加重突出
:段落突出显示,能原样显示文本原有的排版格式 bootstrap里面的表格:
bootstrapWEB前端框架课程设计报告模板 武汉软件工程职业学院《Web前端框架应用》 课程设计报告 2019-2020学年度第一学期 题目:特效设计学习网站 姓名:李告 班级:软件1809 日期:2019 年12 月28 日
一、网站策划 本部分主要对网站各页面的布局进行规划,并进行简单的文字说明。 Index.html设计图 Cocos 产品子页面01.html
Host post.html-子页面02设计图 Shopping-子页面03设计图
二、效果图 本部分主要是对各页面进行截图,并对每页所用技术进行说明,必要时,可以添加简单的代码说明。 Index.html效果图 1.首页基于bootstrap响应式开发,登录(表单)与注册(表单)按钮运用了模态框。 2.Banne图运用了轮播并用JS代码设置轮播间隔时间为2s。 3.导航栏采用带有下拉菜单的响应式导航,搜索框运用了字体图标。 4.内容部分左侧采用轮播,右侧采用标签页插件。 5.在线课程部分也采用了栅格系统(大屏是4列,小屏2列,超小屏1列)缩略 图、标签页插件。 6.社区版块采用了徽章、折叠插件。 7.点击导航栏热榜跳转至host post-子页面02.html,点击导航栏Cocos2D跳转
至Cocos产品01.html子页面,点击在线课程里的推荐课程第一个(学点模型干动画)跳转至shopping子页面,各页面点击首页均可来回跳转。 Cocos 产品子页面01.html效果图 1.本子页面导航栏采用了响应式导航栏。 2.中间采用了面板布局组件。
3.主体内容部分采用了附加导航、滚动监听插 件。 4.Footer部分采用了分页布局组件。 Host post.html-子页面02效果图 1.本子页面采用了左侧导航采用了提示工具插件,注册,登录按钮采用模态框,内容运用了表单。
bootstrap讲义 排版样式 一.页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体 Bootstrap 将全局font-size 设置为14px,line-height 行高设置为1.428(即 20px);段落元素被设置等于1/2 行高(即10px);颜色被设置为#333。 2.标题 //内联元素使用标题字体 Bootstrap 在h1 ~ h6 元素之间,还可以嵌入一个small 元素作为副标题, //在标题元素内插入small 元素
Bootstrap 框架Bootstrap 小标题 在h1 ~ h6 下的small 样式也进行了改变,颜色变成淡灰色:#777,行高为1,粗度为400。 3.内联文本元素 //添加标记,
元素或.mark 类 Bootstrap框架 //各种加线条的文本 Bootstrap 框架 //删除的文本 Bootstrap 框架 //无用的文本 Bootstrap 框架 //插入的文本 Bootstrap 框架 //效果同上,下划线文本 //各种强调的文本 Bootstrap 框架 //标准字号的85% Bootstrap 框架 //加粗700 Bootstrap 框架 //倾斜 4.对齐 //设置文本对齐 Bootstrap 框架 //居左
Bootstrap 框架 //居中
Bootstrap 框架 //居右
Bootstrap 框架 //两端对齐,支持度不佳
Bootstrap 框架 //不换行 5.大小写 //设置英文文本大小写
Bootstrap 框架 //小写
Bootstrap 框架 //大写
Bootstrap 框架 //首字母大写 6.缩略语 //缩略语 Bootstrap框架 7.地址文本 //设置地址,去掉了倾斜,设置了行高,底部20px
Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890