源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

学习使用Bootstrap页面排版样式

  • 时间:2022-02-26 11:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:学习使用Bootstrap页面排版样式
Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。 [b]1. Bootstrap 特点[/b] Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下: (1). 跨设备、跨浏览器,可以兼容所有现代浏览器,包括比较诟病的 IE7、8。 (3). 提供的全面的组件,Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。 (4). 内置 jQuery 插件,Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种常规特效。 (5). 支持 HTML5、CSS3,HTML5 语义化标签和 CSS3 属性,都得到很好的支持。 (6). 支持 LESS 动态样式,LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS,它和 Bootstrap 能很好的配合开发。 [b]2. 引入Boostrap[/b]
//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
</head>
<body>
  <button class="btn btn-info">Bootstrap</button>

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</body>
</html>

[b]3. Boostrap的排版样式[/b] [b]页面主体 [/b] Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即 20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。 [b]设置文本对齐[/b]
<p class="text-left">Bootstrap 框架</p>    //居左
<p class="text-center">Bootstrap 框架</p>   //居中
<p class="text-right">Bootstrap 框架</p>   //居右
<p class="text-justify">Bootstrap 框架</p>  //两端对齐,支持度不佳
<p class="text-nowrap">Bootstrap 框架</p>   //不换行
[b]设置英文文本大小写 [/b]
<p class="text-lowercase">Bootstrap 框架</p>  //小写
<p class="text-uppercase">Bootstrap 框架</p>  //大写
<p class="text-capitalize">Bootstrap 框架</p>  //首字母大写
[b]缩略语[/b]
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
[b]地址文本 [/b]
//设置地址,去掉了倾斜,设置了行高,底部 20px
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
[b]引用文本[/b]
//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote>Bootstrap 框架</blockquote>
//反向
<blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>
[b]列表排版 [/b]
//移出默认样式
<ul class="list-unstyled">
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
</ul>

//设置成内联
<ul class="list-inline">
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
</ul>

//水平排列描述列表
<dl class="dl-horizontal">
  <dt>Bootstrap</dt>
  <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>

代码
<code><section></code>   //内联代码
press <kbd>ctrl + ,</kbd>     //用户输入
<pre><p>Please input...</p></pre> //代码块
此外,Bootstrap 还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复写 CSS。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部