学习使用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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery中extend函数详解
Feb 13 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript 事件绑定问题
2011/01/01 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
微信小程序实现循环动画效果
2018/07/16 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python中使用中文的方法
2011/02/19 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python for和else语句趣谈
2019/07/02 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
销售找工作求职信
2013/12/20 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
评先进个人材料
2014/12/29 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
台风停课通知
2015/04/24 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python