学习使用Bootstrap页面排版样式


Posted in Javascript onMay 11, 2017

Bootstrap之页面排版样式

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

1. Bootstrap 特点

Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:

(1). 跨设备、跨浏览器,可以兼容所有现代浏览器,包括比较诟病的 IE7、8。

(3). 提供的全面的组件,Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。

(4). 内置 jQuery 插件,Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种常规特效。

(5). 支持 HTML5、CSS3,HTML5 语义化标签和 CSS3 属性,都得到很好的支持。

(6). 支持 LESS 动态样式,LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS,它和 Bootstrap 能很好的配合开发。

2. 引入Boostrap

//第一个 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>

3. Boostrap的排版样式

页面主体

Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即
20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。

设置文本对齐

<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>   //不换行

设置英文文本大小写

<p class="text-lowercase">Bootstrap 框架</p>  //小写
<p class="text-uppercase">Bootstrap 框架</p>  //大写
<p class="text-capitalize">Bootstrap 框架</p>  //首字母大写

缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

地址文本

//设置地址,去掉了倾斜,设置了行高,底部 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>

引用文本

//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote>Bootstrap 框架</blockquote>
//反向
<blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>

列表排版

//移出默认样式
<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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
JQuery学习总结【二】
Dec 01 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
公众号SVG动画交互实战代码
May 31 Javascript
Angularjs 与 bower安装和使用详解
May 11 #Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 #Javascript
es6学习笔记之Async函数基本教程
May 11 #Javascript
Bootstrap模态框插件使用详解
May 11 #Javascript
canvas实现弧形可拖动进度条效果
May 11 #Javascript
es6学习笔记之Async函数的使用示例
May 11 #Javascript
Node.js安装配置图文教程
May 10 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
极简的Python入门指引
2015/04/01 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python实现反转部分单向链表
2018/09/27 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python正则表达式学习小例子
2020/03/03 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
利用Python优雅的登录校园网
2020/10/21 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
行政经理的岗位职责
2013/11/23 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
怎么写好自荐书
2014/03/02 职场文书
如何写早恋检讨书
2014/09/10 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
区域销售大会开幕词
2016/03/04 职场文书