Bootstrap v2 教程
Bootstrap v2教程
Bootstrap v2是一个流行的前端开发框架,它提供了一组预定义的CSS和JS类,可以帮助开发者快速而有效地构建响应式Web应用程序和网站。在本教程中,我们将带你从开始到精通Bootstrap v2的基础知识和技巧,包括布局,样式,组件和插件等方面。
布局
网页布局包含以下三个基本元素:网格、行和列。Bootstrap提供了一个基于12列网格系统的布局,这使得创建响应式布局变得格外简单。
网格
网格是一种基于行和列的组织结构,可以帮助在不同视口大小下排列内容。Bootstrap v2的网格共有12列,每一列都有一个相对的宽度(例如col-md-4表示该列占据12列的1/3)。为了确保该网格系统能够运作,我们需要将页面划分为一行,然后在行内放置列。
<div class="row">
<div class="col-md-4">
Column 1
</div>
<div class="col-md-4">
Column 2
</div>
<div class="col-md-4">
Column 3
</div>
</div>
行
Bootstrap v2的行是一组列(column)的容器,该容器使得多列在同一水平位置上对齐,并按照适当的间距排列。
<div class="row">
<div class="col-md-4">
Column 1
</div>
<div class="col-md-4">
Column 2
</div>
<div class="col-md-4">
Column 3
</div>
</div>
列
列是指网格系统内的水平元素,Bootstrap v2提供了多种类可用于设置列的宽度,颜色,边框以及对齐方式等。
<div class="row">
<div class="col-md-4">
Column 1
</div>
<div class="col-md-4">
Column 2
</div>
<div class="col-md-4">
Column 3
</div>
</div>
样式
Bootstrap v2提供了一组常用的样式类,包括文本,背景,颜色和按钮复选框等等。
文本
Bootstrap v2提供多种样式类用于设置文本颜色、大小以及其他相关属性。
<p class="text-danger">danger text</p>
<p class="text-primary">primary text</p>
<p class="text-muted">muted text</p>
背景
Bootstrap v2的背景类包括了Jumbotron,模态框(Modal)以及不透明度的设置。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a sample text inside a jumbotron.</p>
</div>
颜色
颜色类用于设置背景色和文字颜色。
<div class="bg-primary text-white">This is a sample text with primary bg color and white text.</div>
<div class="bg-warning text-dark">This is a sample text with warning bg color and dark text.</div>
按钮
Bootstrap v2提供了多种按钮样式,包括基础、主要、危险、警告等。
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
组件
Bootstrap v2为开发者提供了丰富的可重用的组件,包括导航、分页、进度条、警告框、表单等。
导航
Bootstrap v2提供了多种导航组件,包括基础、可折叠、分页、面包屑等。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>
分页
Bootstrap v2提供了多种分页样式,可以根据自己的需求选择不同的样式。常用样式包括“上一页”、“下一页”、“数字”和“省略号”。
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
进度条
Bootstrap v2的进度条可用于表示一个操作的进度,或者制作一个类似于计量器的效果。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
警告框
警告框是用来提醒读者或者用户的一些特别信息的。
<div class="alert alert-warning" role="alert">
This is a sample warning alert.
</div>
表单
表单是一个用于收集用户信息的样式组件,常见的包括输入框、下拉选项、单选框和复选框。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
插件
Bootstrap v2的插件包括提供常见的UI交互效果的JS插件,如模态框、标签页、下拉菜单、轮播图和弹出菜单等。
模态框(Modal)
模态框用于展示一个带有强提醒性质的弹窗信息。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
标签页(Tabs)
标签页指是用于在同一界面上展示多个小功能区块的形式,让用户可以在不同界面之间切换。
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is Home Tab</div>
<div class="tab-pane" id="profile">This is Profile Tab</div>
<div class="tab-pane" id="messages">This is Messages Tab</div>
<div class="tab-pane" id="settings">This is Settings Tab</div>
</div>
下拉菜单(Dropdowns)
下拉菜单是用于展示一系列相关选项的列表,一般位于界面的较高位置。
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
轮播图(Carousel)
轮播图常用于展示一组照片或图片,以醒目的形式呈现。
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg" alt="First Slide">
</div>
<div class="item">
<img src="img/slide2.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="img/slide3.jpg" alt="Third Slide">
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
弹出菜单(Popover)
弹出菜单用于在用户点击按钮时展现更多信息。
<button type="button" class="btn btn-default" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" data-content="<strong>Popover</strong> This is a sample Popover Text!">Click Me</button>
总结
Bootstrap v2提供了大量预定义的CSS和JS类,可帮助开发者快速构建响应式Web应用程序及网站。在本教程中,我们详细介绍了Bootstrap v2的网格系统、样式、组件和插件等方面。希望这篇文章对于初学者来说有所帮助,对于开发者也有所启迪。