Bootstrap中的排版

暮雪之寒
1,574 阅读5分钟

Bootstrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。Bootstrap对默认的排版方式进行了CSS样式定义，使得各种基本结构套用出来的HTML页面更加美观。

Bootstrap中的全局样式

特点：
①代码整洁；
②风格统一；
③美观易用；
引用方式：

 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

Bootstrap中的排版--标题

标题：（元素h1~h6都能使用，而.h1~.h6类名能为内联元素（如span）赋予标题的样式）

字体大小皆为：
h1:36px;
h2:30px;
h3:24px;
h4:18px;
h5:14px;
h6:12px;

副标题：（small）,h标签内用<small>标签圈定副标题的内容即可

<h1>标题一<small>小标题</small></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<span class="h1">标题一</span>
<span class="h2">标题二</span>
<span class="h3">标题三</span>
<span class="h4">标题四</span>
<span class="h5">标题五</span>
<span class="h6">标题六</span>

Bootstrap中的排版--文本

段落： p标签——默认字体：14px;行高：20px；底部外边距：10px

【对齐】

class = "text-left":左对齐

class = "text-center":居中对齐

class = "text-right":右对齐

【大小写】

class = "text-lowercase":字母小写

class = "text-uppercase":字母大写

class = “text-captialize”:首字母大写

【标签】

<mark>强调文字，底边变黄，高亮标记</mark>

<del>删除文字，中间有横线</del>

<ins>标记插入，下划线</ins>

<u>下划线</u>

<small>副标题，文字变小，字体比标签外的字体变小</small>

<strong>标签加粗字体</strong>

Bootstrap中的表格

用法：<table class="table ..."></table> <tr class="danger ..."></tr>

.table ：基础表格
.table-striped 条纹 、斑马线表格
.table-bordered 带边框
.table-hover 鼠标悬停高亮
.table-condensed 紧凑型
.table-responsive：响应式表格
.danger 红色
.warning 黄色
.info 蓝色
.success 绿色
.active 悬停时颜色

Bootstrap——表单(1)：

表单（bootstrp，默认为所有控件添加一个label,为表单添加说明 ）
基础表单：input/select/textarea等用.form-control
水平表单：form用 .form-horizontal
内联表单: form用 .form-inline
输入控件 input用 .form-control
下拉控件:select用 .form-control
文本控件: textarea用 .form-control
复选框和单选框:<label><input type="text"control="form-control" /></babel>
label用 .checkbox-inline内联样式
label用 .radio-inline内联样式

html5特性: placeholder 给用户输入一个提示
form->form-inline 它的所有元素是内联的，向左对齐的，标签是并排的,水平排版
div->form-group 将label和input(或其他)组合成一个组件
input->input-lg/sm 改变输入框大/小
input->form-control 圆角方框发光
label->sr-only 取消提示信息
label-> control-label 可更改相关样式
div->has-successs/waring has-error等可改变颜色 (label等元素中要有control-label)

bootstrap中的表达：

bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。

<from class="form-inline"><!--排版效果进行水平排列-->
	<div class="form-group has-success"><!--has-success代表一种状态-->
		<lable class="control-table" for="">这是一个输入框:</lable>
		<!--sr-onlyt让提示性文字消失control-table可控制的表格-->
		<input type="text" class="form-control input-sm" placeholder="这是一个输入框" ><!--搜索框-->
	</div><!--变大input-lg变小input-sm-->
	<div class="form-group has-warning">
		<lable class="control-table" for="">这是一个输入框:</lable>
		<select name="" id="" class="form-control"><!--下拉-->
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
			<option value="">深圳</option>
		</select>
	</div>
	<div class="form-group has-error">
		<lable class="control-table" for="">这是一个输入框:</lable>
		<textarea name="" id="" cols="30" rows="10" class="form-control">
	</div>
</from>

ps: jsp中input-lg、input-sm类不明显或不起作用
给类名form-group的div添加类has-error等类，并给label标签添加control-label类名后，jsp不起作用

Bootstrap——表单(1)：

<button class="btn btn-default">这是一个按钮</button>

  • btn-default按钮圆角

  • 改变按钮颜色的类名（class="btn btn-default"）：
    .btn-default 默认按钮（白)

    ,btn-primary 主要按钮（蓝）

    .btn-danger 报错按钮（红）

    .btn-warning 警告按钮（黄）

    .btn-info 信息按钮（蓝）

    .btn-success 成功按钮（绿）

    .btn-link 链接按钮（无边框）

    .btn-lg 大按钮

    .btn-sm 小按钮

    按下按钮的状态效果:在类名里面加入active

    按钮变为全屏大小，就是宽度是全屏的：btn-block

  • 禁用按钮状态:disabled="disabled"

ps： 在a标签的类名里面加入btn的效果也是可以的

图片--形状

.img-rounded圆角

.img-circle 圆形

.img-thumbnail带有边框的圆角图形

PS: 分享一个你会用就非常有用的链接（组件 大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。） v3.bootcss.com/components/…

avatar
文章
阅读
粉丝