引导之页面排版样式
引导是由Twitter公司(全球最大的微博)的两名技术工程师研发的一个基于HTML, CSS, JavaScript的开源框架。该框架代码简洁,视觉优美,可用于快速,简单地构建基于电脑及移动端设备的Web页面需求。
<强> 1。引导特点
引导非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:
(1)。跨设备,跨浏览器,可以兼容所有现代浏览器,包括比较诟病的IE7, 8 .
(3)。提供的全面的组件,引导提供了实用性很强的组件,包括:导航,标签,工具条,按钮等一系列组件,方便开发者调用。
(4)。内jQuery插置件,引导提供了很多实用性的jQuery插件,这些插件方便开发者实现网中各种常规特效。
(5)。支持HTML5, CSS3, HTML5语义化标签和CSS3属性,都得到很好的支持。
(6)。支持不动态样式,使用变量,嵌套,操作混合编码,编写更快,更灵活的CSS,它和引导能很好的配合开发。
<强> 2。引入Boostrap
//第一个引导
& lt; !DOCTYPE html>
& lt; html lang=坝τ谩北?
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt;按钮类=" btn btn-info "祝辞Bootstrap
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
之前
<强> 3。Boostrap的排版样式
引导将全局字体大小设置为14 px,行高行高设置为1.428(即
20 px); & lt; p>段落元素被设置等于1/2行高(即10 px);颜色被设置为# 333。
& lt; p class=" text-left”在引导框架& lt;/p>//居左
& lt; p class=" text-center”在引导框架& lt;/p>//居中
& lt; p class=" text-right”在引导框架& lt;/p>//居右
& lt; p class=" text-justify”在引导框架& lt;/p>//两端对齐,支持度不佳
& lt; p class=" text-nowrap”在引导框架& lt;/p>//不换行
之前
& lt; p class=" text-lowercase”在引导框架& lt;/p>//小写
& lt; p class=" text-uppercase”在引导框架& lt;/p>//大写
& lt; p class=" text-capitalize”在引导框架& lt;/p>//首字母大写
之前
Bootstrap<简写的title=耙肌眂lass=笆鬃帜杆趼源省痹诳蚣? lt;/abbr>
//设置地址,去掉了倾斜,设置了行高,底部20 px
& lt; address>
& lt; strong> Twitter公司。你们;/strong> & lt; br>
福尔松的大街795号,600套房& lt; br>
旧金山,CA 94107 & lt; br>
& lt;简写的title=暗缁啊痹赑: & lt;/abbr>(123)456 - 7890
& lt;/address>
之前
//默认样式引用,增加了做边线,设定了字体大小和内外边距
& lt; blockquote>引导框架& lt;/blockquote>//反向
& lt;引用类=" blockquote-reverse "祝辞引导框架& lt;/blockquote>
之前
//移出默认样式
& lt; ul类=發ist-unstyled”比;
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt;/ul>//设置成内联
& lt; ul类=發ist-inline”比;
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt; li>引导框架& lt;/li>
& lt;/ul>//水平排列描述列表
& lt; dl类=癲l-horizontal”比;
& lt; dt> Bootstrap
& lt; dd>引导提供了一些常规设计好的页面排版的样式供开发者使用。你们;/dd>
& lt;/dl>
之前
代码
& lt; code>, lt; section& gt; & lt;/code>//内联代码
新闻& lt; kbd> ctrl + & lt;/kbd>//用户输入
& lt; pre>, lt; p& gt;请输入…,lt;/p& gt; & lt;/pre>//代码块
之前
此外,引导还列举了& lt; var>表示标记变量,& lt; samp>表示程序输出,只不过没有重新复写CSS。
