学习使用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 相关文章推荐
js函数排序的实例代码
Jul 01 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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
PHP4之COOKIE支持详解
2006/10/09 PHP
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php bootstrap实现简单登录
2016/03/08 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
EM算法的python实现的方法步骤
2018/01/02 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
django API 中接口的互相调用实例
2020/04/01 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
生产主管岗位职责
2013/11/10 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
思品教学工作总结
2015/08/10 职场文书