杰晶网络

功能强大的Bootstrap使用手册（一）
网络编程 2024/5/19 佚名
3 2

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。

1.编写头部

<head>
 <meta charset="UTF-8">
 <!--为了让ie采用最新的渲染模式，要把这个标签添加上-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--针对响应式布局，首先获取设备的物理宽度，根据设备物理宽度设置网页宽度，按照1:1缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>LearnBootstrap</title>
 <!--直接引用文件-->
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <!--引用cdn地址-->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

 <!--为了支持ie9以下，要加上这些-->
 <!--[if lt IE 9]>
 <!--让他支持h5标签-->
 <script src="/UploadFiles/2021-04-02/html5shiv.min.js">


2.引入js


这个可以写在body





<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/UploadFiles/2021-04-02/jquery.min.js">


3.使用container类 

container类是一个常用的div类 

主要是用居中功能


<div class="container">hello</div>


4.使用栅格化系统


栅格化系统是BootStrap一个非常常用的一个布局系统 

简单的使用如下





<div class="row">
 <!--xs表示在手机上，sm表示在平板上，md表示在桌面上。后面的数字表示占多少列，满屏为12列-->
 <!--内容超过栅格高度，则会增加高度，不会增加宽度-->
 <!--offset表示向右移动几列-->
 <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-4">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.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">
 <!--push向后移动，pull向前移动-->
 <div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4</div>
</div>







可以看到栅格化系统可以根据不同设备调整不同宽度


5.使用表格





<div class="container">
 <!--响应式表格，内容太长可以左右移动-->
 <div class="table-responsive">
 <!--table 后几个分别是表格有边框，鼠标经过tbody行时颜色加深，表格紧缩-->
 <table class="table table-bordered table-hover table-condensed">
 <thead>
 <tr>
 <th>表格标题</th>
 <th>表格标题</th>
 <th>表格标题</th>
 </tr>
 </thead>
 <tbody>
 <!--该行颜色为浅绿-->
 <tr class="success">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 <!--该行颜色为浅蓝-->
 <tr class="info">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 <!--该行颜色为米白-->
 <tr class="warning">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 </tbody>
 </table>
 </div>
</div>







如果是想某一格变颜色也可以在th标签内加类像tr一样


6.使用表单


最基本的用法如下





<div class="container">
 <form>
 <!--的部分项是一个form-group的父布局，里面有label和input-->
 <div class="form-group">
 <!--label的for要和input的id对应-->
 <label for="exampleInputEmail1">Email address</label>
 <!--input的class要设为form-control-->
 <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>
</div>







如果将form的类设为form-inline则将所有元素显示在同一行


如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度 

如





<div class="container">
 <!--让每一个form-group显示一行，不过每个form-group的子项都要规定宽度-->
 <form class="form-horizontal">
 <div class="form-group">
 <label for="Emai" class="col-md-2 control-label">Email</label>
 <!--input-group让提示和补充显示在同一行-->
 <div class="col-md-10">
 <input class="form-control" type="email" placeholder="Email" id="Emai">
 </div>
 </div>
 <div class="form-group">
 <label for="Passwor" class="col-sm-2 control-label">Password</label>
 <div class="col-sm-10">
 <input class="form-control" type="password" placeholder="Password" id="Passwor">
 </div>
 </div>
 <button type="submit" class="btn btn-primary col-md-offset-2">summit</button>
 </form>
</div>







我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同 

Bootstrap给我们提供了这个很实用的功能





<div class="container">
 <form>
 <!--父div的类要增加两项-->
 <!--成功状态-->
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess2">Input with success</label>
 <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
 <!--右边的图标-->
 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
 <!--这个信息隐藏，增加了代码的可读性-->
 <span id="inputSuccess2Status" class="sr-only">(success)</span>
 </div>
 <!--警告状态-->
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning2">Input with warning</label>
 <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
 <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
 <span id="inputWarning2Status" class="sr-only">(warning)</span>
 </div>
 <!--错误状态-->
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError2">Input with error</label>
 <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
 <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
 <span id="inputError2Status" class="sr-only">(error)</span>
 </div>
 </form>
</div>







7.按钮


按钮是必不可少的一样东西





<!-- 白色背景 -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- 蓝色背景 -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- 绿色背景 -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- 浅蓝色背景 -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- 橙黄色背景 -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- 红色背景 -->
<button type="button" class="btn btn-danger">（危险）Danger</button>







类中还可以添加尺寸





 <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
 <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
 <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
 <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>






以上就是Bootstrap的使用步骤和常用用法 

用上这个框架后不仅开发的速度上去了，质量也提升了。




如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：


Bootstrap学习教程


Bootstrap实战教程


Bootstrap插件使用教程


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
Bootstrap用法,Bootstrap常用用法,Bootstrap使用手册
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“功能强大的Bootstrap使用手册（一）”
暂无“功能强大的Bootstrap使用手册（一）”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接