首页 >

第二章之Bootstrap 页面排版样式【javascript】

Posted on | by liu
web前端|js教程第二章之Bootstrap 页面排版样式【javascript】
bootstrap排版,bootstrap页面排版
web前端-js教程
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
网站源码 仿乌云,vscode 微信,ubuntu 变白,tomcat安装环境,sqlite编辑工具下载,wpml 插件下载,建设银行前端框架,爬虫入库指的是什么,php 5.2 zend,福建专业seo推广,出租网站源码,织梦网页分辨率,oelove模板lzw
学习要点：
dll下载者源码,ubuntu 不显示用户,tomcat不能保存项目,爬虫语句python,域名解析查询php,seo大词lzw
1.页面排版
在线考试 数学 源码,ubuntu桌面快捷操作,tomcat7安装版的,美国爬虫专家布莱恩,php7架构学习外包,闪电seo sitelzw
本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。

一．页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；

段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

//创建包含段落突出的文本
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
2.标题

//从 h1 到 h6
Bootstrap 框架
//36pxBootstrap 框架//30px
Bootstrap 框架
//24px
Bootstrap 框架
//18px
Bootstrap 框架
//14px
Bootstrap 框架
//12px
我们从 Firebug 查看元素了解到， Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体Bootstrap
注：通过 Firebug 查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，

//在标题元素内插入 small 元素
Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题
通过 Firebug 查看，我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算(查看 Firebug 计算后的样式)， h1 ~ h3 下的 small 为 23.4px、 19.5px、 15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

3.内联文本元素

//添加标记，元素或.mark 类
Bootstrap框架
 //各种加线条的文本Bootstrap 框架//删除的文本Bootstrap 框架//无用的文本Bootstrap 框架//插入的文本Bootstrap 框架//效果同上，下划线文本 //各种强调的文本Bootstrap 框架//标准字号的 85%Bootstrap 框架//加粗 700Bootstrap 框架//倾斜
4.对齐

//设置文本对齐
Bootstrap 框架
//居左
Bootstrap 框架
//居中
Bootstrap 框架
//居右
Bootstrap 框架
//两端对齐，支持度不佳
Bootstrap 框架
//不换行
5.大小写

//设置英文文本大小写
Bootstrap 框架
 //小写
Bootstrap 框架
 //大写
Bootstrap 框架
//首字母大写
6.缩略语

//缩略语Bootstrap框架
7.地址文本

//设置地址，去掉了倾斜，设置了行高，底部 20px　　Twitter, Inc.
　　795 Folsom Ave, Suite 600
　　San Francisco, CA 94107
　　P: (123) 456-7890
8.引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距 //反向
　　Bootstrap 框架
9.列表排版

//移出默认样式　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架 //设置成内联　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架　　Bootstrap 框架 //水平排列描述列表　　Bootstrap　　Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。
10.代码

//内联代码
 //用户输入press ctrl + , //代码块
Please input...
Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写 CSS。

以上所述是小编给大家介绍的Bootstrap 页面排版样式的相关知识，希望对对大家有所帮助！

 
第二章之Bootstrap 页面排版样式【javascript】
  • Bootstrap入门书籍之（一）排版【javascript】

    • Bootstrap入门书籍之（一）排版【javascript】 | Bootstrap入门书籍之（一）排版【javascript】 ...