Bootstrap学习与引导

论坛 › 期权论坛 › 脚本     
匿名技术用户   2021-1-3 14:17   26   0

Bootstrap:让web开发更迅速、简单：可以直接抄，抄过去就能用。

链接：http://www.bootcss.com/

Bootstrap核心学习：

全局Css样式：

布局容器：（★）

布局容器：相当于一张画布，后期再画布中添加页面的内容。

翻译：在绘画之前，先准备一个画布，两个画布不要重叠。

测试代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！</h1>

</div>

<div class="container-fluid">

<h1>你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！</h1>

</div>

</body>

</html>


栅格系统：（★★★★★）

什么是栅格系统？

我们习惯于使用表格来给页面画格子，方便我们整齐有序地将内容填充到页面，但是每次自己画格子，太麻烦，所以Bootstrap提供了一个写好的“表格”给我们使用——这个就是栅格系统。

Bootstrap栅格系统发挥两个作用：

1、对页面进行布局

2、根据设备屏幕，自动调节内容的排列

栅格系统快速入门：（★★★★★）

栅格：为了防止以前的表格，会出现，网页缩小，内容跟着缩小的缺点。栅格系统可以根据当前页面大小，去改变栅格中的数据排列组合方式。

如果页面变小，将栅格内容，从横向排列改成纵向排列。

需求：按照如图所示，画出格子

素材样式：

<style type="text/css">

div{

border: 1px solid red;

}

</style>

普通表格:

<table border="2px" bordercolor="red" width="100%">

<tr><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td></tr>

<tr><td colspan="8">我是表格......</td><td colspan="4">我是表格......</td></tr>

<tr><td colspan="4">我是表格......</td><td colspan="4">我是表格......</td><td colspan="4">我是表格......</td></tr>

<tr><td colspan="6">我是表格......</td><td colspan="6">我是表格......</td></tr>

</table>

代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<style type="text/css">

div {

border: 1px solid red;

}

</style>

</head>

<body>

<div class="container-fluid">

<div class="row">

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

</div>

<div class="row">

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

<div class="col-md-6">.col-md-6</div>

<div class="col-md-6">.col-md-6</div>

</div>

</div>

</body>

</html>


那么如果我们需要控制当屏幕在多大范围的时候，进行，页面的适配，我们可是设置一些参数：

以下文字是下图的翻译：

.col-xs-xx ——在超小屏幕下（小于768像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-sm-xx ——在小屏幕下（大于768像素下，且小于992像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-md-xx ——在中等屏幕下（大于992像素下，且小于1200像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-lg-xx ——在超小屏幕下（大于1200像素下）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

栅格测试代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<style type="text/css">

div {

border: 1px solid red;

}

</style>

</head>

<body>

<div class="container-fluid">

<div class="container-fluid">

<div class="row">

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

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

</div>

<div class="row">

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<!-- Optional: clear the XS cols if their content doesn't match in height -->

<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

</div>

</div>

</div>

</body>

</html>


3.1.4 排版：（★）

标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

1.5 对齐（★）

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<!--超出页面显示范围不换行-->

<p class="text-nowrap">No wrap text.</p>

对齐的时候有一个问题：

测试代码：

<span class="text-center">Hello Word</span>

没有居中的效果，因为span不是单独占用一行

内联列表：（★）

内联列表：通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">

<li>Lorem ipsum</li>

<li>Phasellus iaculis</li>

<li>Nulla volutpat</li>

</ul>

表格：（★）

<table class="table">

<caption>Optional table caption.</caption>

<thead>

<tr>

<th>#</th>

<th>First Name</th>

<th>Last Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>Mark</td>

<td>Otto</td>

<td>@mdo</td>

</tr>

<tr>

<th scope="row">2</th>

<td>Jacob</td>

<td>Thornton</td>

<td>@fat</td>

</tr>

<tr>

<th scope="row">3</th>

<td>Larry</td>

<td>the Bird</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

表单：（★）

<form>

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

</div>

<div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

</div>

<div class="form-group">

<label for="exampleInputFile">File input</label>

<input type="file" id="exampleInputFile">

<p class="help-block">Example block-level help text here.</p>

</div>

<div class="checkbox">

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button></form>

内联表单：（★）

内联表单：行级表单

<form class="form-inline">

<div class="form-group">

<label for="exampleInputName2">Name</label>

<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

</div>

<div class="form-group">

<label for="exampleInputEmail2">Email</label>

<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

</div>

<button type="submit" class="btn btn-default">Send invitation</button></form>

按钮：（★）

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

图片：（★）

<img src="img/1.jpg" alt="..." class="img-rounded img-responsive">

<img src="img/2.jpg" alt="..." class="img-circle img-responsive">

<img src="img/3.jpg" alt="..." class="img-thumbnail img-responsive">

Ps：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。

Bootstrap组件：

字体图标（★）

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

注意，这个字体图标其实是一个文本,调整大小可以使用style="font-size: 60px;"

<span class="glyphicon glyphicon-search" aria-hidden="true" style="font-size: 60px;"></span><br>

效果：

下拉菜单（★）

Div和无需列表的组合

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

</head>

<body>

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

Dropdown1111

<span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

<li>

<a href="#">Action222</a>

</li>

<li>

<a href="#">Another action3333</a>

</li>

<li>

<a href="#">Something else here4444</a>

</li>

<li role="separator" class="divider"></li>

<li>

<a href="#">Separated link555</a>

</li>

</ul>

</div>

</body>

</html>


3.2.3 输入框组（★）

<div class="input-group">

<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">

<span class="btn btn-default input-group-addon glyphicon glyphicon-search" id="basic-addon2"></span>

</div>

效果：

导航条（★）

<nav class="navbar navbar-default">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

分页条

<nav aria-label="Page navigation">

<ul class="pagination">

<li>

<a href="#" aria-label="Previous">

<span aria-hidden="true"></span>

</a>

</li>

<li><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="#" aria-label="Next">

<span aria-hidden="true"></span>

</a>

</li>

</ul>

</nav>

3.3 Bootstrap插件（★）

模态框（★）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

</head>

<body>

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

...

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

</body>

</html>

轮播图Carousel（★）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="img/1.jpg" alt="...">

<div class="carousel-caption">

...

</div>

</div>

<div class="item">

<img src="img/2.jpg" alt="...">

<div class="carousel-caption">

...

</div>

</div>

<div class="item">

<img src="img/3.jpg" alt="...">

<div class="carousel-caption">

...

</div>

</div>

...

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名技术用户

积分:7942463
帖子:1588486
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP