学习使用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之WebSocket技术详解
Nov 18 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
django 消息框架 message使用详解
2019/07/22 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
优秀教师先进事迹
2014/01/22 职场文书
班级入场式解说词
2014/02/01 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
政协常委会议主持词
2015/07/03 职场文书
售房协议书范本
2015/08/11 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
python实战之90行代码写个猜数字游戏
2021/04/22 Python