基于Bootstrap的页面排版知识

标题:


Bootstrap定义了所有HTML的标题样式,<h1>...<h6>标签或者在标签内加入.h1 class等可以得到一样的效果

效果:

副标题:

标签<small>或者添加.small class

效果:

缩写:

<abbr>标签,title属性中写全称

<abbr title="World Trade Organization">WTO</abbr>

当鼠标移动到文本上时显示:

列表:

.list-unstyled class的应用(去除列表前面的样式)

效果:

.list-inline class(列表会显示在一行上)

效果:

.dl-horizontal class应用于定义列表

效果:

更多的类

.lead 突出显示

.text-left 文本左对齐

.text-center 文本居中对齐

.text-right 文本右对齐

.tetx-nowrap 文本段落不换行

.text-justify 自动换行

.text-uppercase 文本大写

.text-lowercase 文本小写

.text-capitalize 首字母大写

时间: 2024-10-10 18:32:49

基于Bootstrap的页面排版知识的相关文章

BootStrap框架---1.页面排版

•前言: •  Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 今天我们来看Bootstrap的页面排版!!!! 首先:其默认设置了一些样式 全局font-size为14px,line-height为20px,p段落设置10px,颜色#333; 1.页面主体  .lead 1 //.lead 突出效果 2 <p>Boo

基于Bootstrap框架的临床数据管理系统的设计与开发

    基于Bootstrap框架的临床数据管理系统的设计与开发     2018年11月10日 目  录 第一章绪论... 6 1.1 选题背景及其意义... 6 1.2国内外研究现状... 7 1.2.1 临床大数据管理系统发展现状... 7 1.2.2医疗电子表单管理发展现状... 8 1.3研究目标... 9 1.4 研究内容... 10 1.5论文整体结构... 10 第二章相关技术研究... 12 2.1 AngularJS技术简述... 12 2.2 RESTful API +sw

自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

先来一张效果图: 01. 引言 老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子. 现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文,给程序猿用着还可

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 一.效果展示 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以

基于bootstrap的富文本框——wangEditor【欢迎增加开发】

先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多,一搜索一大堆,可是基于bootstrap的还不多.如今仅仅有一个"bootstrap-wysiwyg".老外写的,没有一个汉字.大家能够fork一下源代码看看,写的很简洁.压缩之后不到10KB.很厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文

基于Bootstrap的网站后台模板Unicorn - Admin Template最新无错版下载

Unicorn - Admin Template Unicorn - Admin Template 是一款支持视网膜屏幕.完全响应式布局,可用于任何应用程序的管理模板.该面板适应任何宽度的设备.无论是智能手机.平板电脑或桌面浏览器都能完美适应.最新版本基于 Bootstrap 3 构建. 使用LESS编译 响应式设计,支持任何的PC或MAC系统,智能手机和平板电脑.Responsive Design, support any PC or MAC systems, phones and table

Bootstrap学习笔记(排版)

bootstrap简介: ?  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ?  基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ?  自定义JQuery插件,完整的类库,基于Less等. 排版: 标题: ①.h1=36px,h2=30px,h3=24px,h4=18px,h5=14px.h6=12px ②<small>标签来制作副标题 强调内容: class

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看样子这种风格还是受到很多园友青睐的.本着不辜负园友们的支持的原则,应群友们的要求,今天来分享下项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) A