bootstrap基础排版优化(待续

1.标题

h1到h6元素重新定义了标准,并设置了上下外边距

h1到h6等6个class样式和以上元素样式一样,但没有上下外边距

在标题内使用small元素,显示小一点的字体,颜色为灰色,行间距为1,h1h2h3内字体为正常字体65%,h4h5h6则是75%。

2.页面主题

全局字体设置为14px,inline-height为20px,p元素中会有一个额外的10px的margin-bottom。

如果让一个段落突出,使用.lead样式,作用是增大字体大小、粗细、行间距、下边距。

3.强调文本

b,strong元素 样式为粗体

small,.small样式为标准字体85%

cite样式为标准字体

对齐方式

text-left 左对齐

text-right 右对齐

text-center 居中

text-justify 两端对齐

4.缩略语

abbr 元素实现了缩略语的功能,缩略词下面有虚横线,鼠标移动到缩略词上有手型图标,显示title属性。

5.地址元素

address 元素设置了20px下外边距,20px行间距

6.引用

blockquote元素里可以引用任意html内容,一般推荐p

样式为上下内边距10px,左右内边距20px,下外边距20px,字号17.5px,左边一个5px的竖线

引用样式加pull-right结果为 右内边距15px,左内边距0,向右对其,右边有5px竖线,左边无竖线

7.列表

ul li无序列表

ol li 有序列表

ul class=‘list-unstyled‘去点列表

ul class=‘list-inline‘ 内联列表

dl列表 dl dt dd 此列表有缩进,有层次感

dl class=‘dl-horizontal‘ 水平定义列表

8.代码

code元素显示内联代码,文字颜色为深红,背景颜色为浅红,设置圆角

kbd元素包含的内容是表示改该内容需要用户键盘输入,文字颜色为白色,背景颜色为深黑色,圆角,阴影

pre 用于显示大块代码段,并保证原有格式不变,在pre元素上应用pre-scrollable样式,控制最大高度为340px,并可以在y轴滚动

9.表格

一般格式

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

table上加样式table,增加单元格的内边距,在thead底部设置一条2px的粗线,以及在每行记录的顶部有一个1px的细线

table上在现有table样式基础上,

应用一个.table-striped,添加了隔行加背景色的设置;

应用一个.table-bordered,为所有单元格提供了一条一像素的边框

应用一个.table-hover,添加一个鼠标悬停高亮的效果

应用一个.table-condensed,表格比普通表格紧凑一些

------------------------------------------------------------------------------------------------------------------------------

为表格的tr元素,添加5种样式,控制tr颜色

tr.active 表示当前活动的信息  灰色

tr.success 表示成功或正确的信息 绿色

tr.info 表示中立的信息或行为 蓝色

tr.warning 表示警告,特别注意 黄色

tr.danger  表示危险或错误的行为 红色

--------------------------------------------------------------------------------------------------------------------------------

响应式表格  在table元素外部加一个div .table-responsive,当小于768像素时出现水平滚动条

10.表单

10-1,一般格式

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

在select、input、textarea上默认应用.form-control样式,宽度会变为100%.

lable和input放在一个样式为.form-group的div里,提供一个下外边距为15px的样式

checkbox类型input放在一个样式为.checkbox的div里,提供上下10px外边距,块,10px的左内边距,、

10-2,内联表单

form元素应用一个.form-inline,将所有控件放在一行表单上

对于select、input、textarea等因为其默认100%,在内联表单中无效,要在外面加一层带有.form-group或.checkbox的div

如果要加label,input等又要换行,因此要加一个div包裹label。

10-3,横向表单

横向表单样式为label何控件水平并排布局

使用方法,在form上应用.form-horizontal样式,而此样式只设置了内外边距,还要应用栅格类,才能将label和控件并排,form-group类似于row,因此无需加row

此中的.radio .checkbox .control-label样式皆为7px上内边距。

10-4,表单控件

input必须设置type

textarea元素rows定义高度,cols定义宽度,但如果应用.form-control,则变为100%,cols不起作用。

checkbox和radio用div包住,并加.radio或.checkbox,div内包含label,添加checkbox-inline或radio-inline,再包住input实现内联样式

10-5,控件大小,在input上使用.input-lg .input-sm样式

11.按钮

11-1,按钮样式

时间: 2024-10-11 06:44:02

bootstrap基础排版优化(待续的相关文章

Bootstrap&lt;基础三&gt; 排版

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &

Bootstrap基础(三):排版

Bootstrap 排版 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题<

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

BootStrap基础入门

BootStrap基础入门 一.BootStrap概述 1.1什么是BootStrap BootStrap,基于HTML.CSS.JavaScript的前端框架(半成品).其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现 BootStrap在jQuery的基础工作,可以理解BootStrap就是jQuery的一个插件. BootStrap使得web开发更加快捷,代码优雅,美观大方. 由Twitter公司的设计

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

Bootstrap &lt;基础二十二&gt;超大屏幕(Jumbotron)

Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <tit