Bootstrap3语法参考手册

空中湖

于 2022-09-06 10:19:01 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/kongzhonghu/article/details/126719498

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

布局容器

<div class="container">
<div class="container-fluid">

栅格系统

实例：从堆叠到水平排列

<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-6">.col-md-6</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>

实例：流式布局容器

<div class="container-fluid">
<div class="row">

实例：移动设备和桌面屏幕

<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6">.col-xs-6</div>

实例：手机、平板、桌面

<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="clearfix visible-xs-block"></div>

实例：多余的列（column）将另起一行排列

<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
<div class="row">
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>

响应式列重置

<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>

Remove gutters

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6">.col-xs-6</div>
<div class="row row-no-gutters">

列偏移

<div class="col-md-4">.col-md-4</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
<div class="col-xs-6 col-sm-4">

嵌套列

<div class="col-xs-8 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-6">
<div class="row">
<div class="col-sm-9">

列排序

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>

Less mixin 和变量

<div class="content-main">...</div>
<div class="content-secondary">...</div>
<div class="wrapper">

排版

标题

页面主体

<p class="lead">...</p>

内联文本元素

对齐

<p class="text-justify">Justified text.</p>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-nowrap">No wrap text.</p>
<p class="text-right">Right aligned text.</p>

改变大小写

<p class="text-capitalize">Capitalized text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-lowercase">Lowercased text.</p>

缩略语

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

引用

<blockquote class="blockquote-reverse">

列表

<ul class="list-unstyled">
<ul class="list-inline">
<dl class="dl-horizontal">

代码

表格

基本实例

<table class="table">

条纹状表格

<table class="table table-striped">

带边框的表格

<table class="table table-bordered">

鼠标悬停

<table class="table table-hover">

紧缩表格

<table class="table table-condensed">

状态类

<td class="info">...</td>
<tr class="active">...</tr>
<td class="success">...</td>
<tr class="info">...</tr>
<td class="active">...</td>
<tr class="danger">...</tr>
<td class="warning">...</td>
<td class="danger">...</td>
<tr class="success">...</tr>
<tr class="warning">...</tr>

响应式表格

<div class="table-responsive">
<table class="table">

表单

基本实例

<div class="form-group">
<div class="checkbox">
<p class="help-block">Example block-level help text here.</p>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<button type="submit" class="btn btn-default">Submit</button>

内联表单

<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
<form class="form-inline">
<div class="form-group">
<div class="checkbox">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<button type="submit" class="btn btn-default">Sign in</button>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
<form class="form-inline">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<div class="input-group-addon">$</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<button type="submit" class="btn btn-primary">Transfer cash</button>
<div class="input-group-addon">.00</div>
<form class="form-inline">
<div class="input-group">

水平排列的表单

<form class="form-horizontal">
<div class="form-group">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
<button type="submit" class="btn btn-default">Sign in</button>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-offset-2 col-sm-10">
<div class="col-sm-10">
<div class="checkbox">

被支持的控件

<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
<div class="checkbox disabled">
<div class="radio">
<div class="radio disabled">
<label class="radio-inline">
<label class="checkbox-inline">
<div class="checkbox">
<div class="radio">
<select class="form-control">
<select multiple class="form-control">

静态控件

<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<p class="form-control-static">email@example.com</p>
<label class="col-sm-2 control-label">Email</label>
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="form-group">
<button type="submit" class="btn btn-default">Confirm identity</button>
<p class="form-control-static">email@example.com</p>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
<label class="sr-only">Email</label>
<label for="inputPassword2" class="sr-only">Password</label>
<form class="form-inline">

焦点状态

禁用状态

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="form-group">
<select id="disabledSelect" class="form-control">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
<div class="checkbox">

只读状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Help text

<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

按钮

可作为按钮使用的标签或元素

<button class="btn btn-default" type="submit">Button</button>
<a class="btn btn-default" href="#" role="button">Link</a>
<input class="btn btn-default" type="submit" value="Submit">
<input class="btn btn-default" type="button" value="Input">

预定义样式

<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

尺寸

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

激活状态

<button type="button" class="btn btn-default btn-lg active">Button</button>
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

图片

响应式图片

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-thumbnail">

辅助类

<p class="text-success">...</p>
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-warning">...</p>
<p class="text-info">...</p>
<p class="text-danger">...</p>
<p class="bg-success">...</p>
<p class="bg-primary">...</p>
<p class="bg-warning">...</p>
<p class="bg-info">...</p>
<p class="bg-danger">...</p>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="caret"></span>
<div class="pull-right">...</div>
<div class="pull-left">...</div>
<div class="center-block">...</div>

<div class="clearfix">...</div>
<div class="hidden">...</div>
<div class="show">...</div>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<h1 class="text-hide">Custom heading</h1>