学习使用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高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP如何使用Memcached
2016/04/05 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
node跨域请求方法小结
2017/08/25 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
python实现用户答题功能
2018/01/17 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
如何在django中添加日志功能
2020/02/06 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
初三家长会邀请函
2014/01/18 职场文书
校园安全教育广播稿
2014/02/17 职场文书
职业生涯规划书前言
2014/04/15 职场文书
中国梦口号
2014/06/13 职场文书
关于远足的感想
2015/08/10 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技