一、bootstrap了解和使用
1.了解
简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。
基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12 列格网，样式向导文档。
自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4 基于 Sass 的 CSS 预处理技术
Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
丰富的组件
2.使用
**下载：**中文网：http://www.bootcss.com/
html模板：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- viewport表示用户是否可以缩放页面； width指定视区的逻辑宽度； device-width指示视区宽度应为设备的屏幕宽度； initial-scale指令用于设置Web页面的初始缩放比例 initial-scale=1则将显示未经缩放的Web文档 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootStrap的使用</title> <!--引入Bootstrap的核心css文件--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> </head> <body> </body> <!--如果需要bootstrap的相关插件或组件，需要引入js文件； 由于bootstrap框架是依赖于jquery的，所以必须先引入jquery的js文件--> <!--引入Jquery的核心JS文件--> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <!--引入核心的bootstrap的js文件--> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script> </html>
二、布局容器和栅格网络系统
1.布局容器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>布局容器</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> </head> <body> <!--.container 类用于固定宽度并支持响应式布局的容器。--> <div class="container" style="background-color: bisque;height: 300px;" > </div> <hr /> <!--.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。--> <div class="container-fluid" style="background-color: khaki;height: 300px;" > </div> </body> </html>
2.栅格网络系统
数据行**(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。**
1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。
2、列偏移
只需要在列元素上添加类名“col-md-offset-”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。
3、列排序
列排序其实就是改变列的方向，就是改变**左右浮动，**并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名”**col-md-push-”和“col-md-pull-*” (其中星号代表移动的列组合数)。往前pull，往后push。
4、列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.<!-- 布局容器--> <div class="container"> <!-- 列组合 --> <!-- 行 --> <div class="row"> <!-- 列 --> <div class="col-md-1" style="background-color: red;">1</div> <div class="col-md-8" style="background-color: green">8</div> </div> <div class="row"> <!-- 列 --> <div class="col-md-5" style="background-color: red;">5</div> <div class="col-md-8" style="background-color: green">8</div> </div> <!-- 列偏移 --> <div class="row"> <!-- 列 --> <div class="col-md-1 col-md-offset-4" style="background-color: blue;">1</div> <div class="col-md-8" style="background-color: green">8</div> </div> <div class="row"> <!-- 列 --> <div class="col-md-5" style="background-color: red;">5</div> <div class="col-md-8 col-md-offset-2" style="background-color: green">8</div> </div> <!-- 列排序 --> <div class="row"> <!-- 列 --> <div class="col-md-1 col-md-push-4" style="background-color: blue;">1</div> <div class="col-md-5 col-md-pull-2" style="background-color: pink">5</div> </div> <!-- 列嵌套 --> <div class="row"> <div class="col-md-4" style="background-color: blue;"> <div class="col-md-7" style="background-color: black;">1</div> <div class="col-md-5" style="background-color: yellow">5</div> </div> <div class="col-md-8" style="background-color: pink">5</div> </div> </div>
三、常用样式
1.排版
1、标题
定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题或使用.small2、段落
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理：
:小号字
:加粗
:斜体
3、引用
：标签定义摘自另一个源的块引用
使用.blockquote-reverse，实现右对齐。
4、强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
5、文本对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐。
6、列表
（1）去点列表:
class=“list-unstyled”
（2）内联列表:
class=” list-inline”，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生
7、代码
（1）使用来显示单行内联代码
（2）使用来显示多行块代码
样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
（3）使用
来显示用户输入代码,如快捷键<!-- 标题--> <h1>hello<small>你好</small></h1> <h2>hello</h2> <h3>hello <span class="small">你好</span></h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> <span class="h2">哈哈哈</span> <hr > <!-- 段落--> <p> 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理： 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理： </p> <p class="lead"> 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理： 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理： </p> <!-- <small>:小号字 <b><strong>:加粗 <i><em>:斜体 --> <p class="lead">以后<strong>会</strong><i>感谢</i>今天的<b>努力</b></p> <hr > <!-- 引用--> <blockquote class="blockquote-reverse"> 好好学习Java！ <footer>本文出自大师之手</footer> <cite>thinking in java</cite> </blockquote> <!--强调--> <div class="text-muted">提示效果</div> <div class="text-primary">主要效果</div> <div class="text-success">成功效果</div> <div class="text-info">信息效果</div> <div class="text-warning">警告效果</div> <div class="text-danger">危险效果</div> <hr > <!-- 文本对齐 5、文本对齐 Bootstrap通过定义四个类名来控制文本的对齐风格： .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。 --> <div class="text-justify"> bootstrap根据平时的使用情形提供了六种形式的列表:( 普通列表、有序列表、去点列表、内联列表、 描述列表、水平描述列表）。在样式方面Bootstrap只是在原有的基础上做了一些细微的优化(margin调整),其他差别不大，加入了一些样式 bootstrap根据平时的使用情形提供了六种形式的列表:( 普通列表、有序列表、去点列表、内联列表、 描述列表、水平描述列表）。在样式方面Bootstrap只是在原有的基础上做了一些细微的优化(margin调整),其他差别不大，加入了一些样式 </div> <hr > <!-- 6、列表 （1）去点列表: class="list-unstyled" （2）内联列表: class=” list-inline”，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。 也可以说内联列表就是为制作水平导航而生 --> <ul > <li>无序项目列表一</li> <li>无序项目列表二</li> </ul> <ul class="list-unstyled" > <li>无序项目列表一</li> <li>无序项目列表二</li> </ul> <ul class="list-inline" > <li>无序项目列表一</li> <li>无序项目列表二</li> </ul> <!-- （1）使用<code></code>来显示单行内联代码 （2）使用<pre></pre>来显示多行块代码 样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条) （3）使用<kbd></kbd>来显示用户输入代码,如快捷键 --> <code> today is a sun day???? today is a sun hello world; </code> <pre class="pre-scrollable"> <!-- 滚动条--> public void eat(){ System.out.println("hello world"); } public void eat(){ System.out.println("hello world"); } public void eat(){ System.out.println("hello world"); } public void eat(){ System.out.println("hello world"); } public void eat(){ System.out.println("hello world"); } </pre> 使用<kbd>ctrl</kbd>+<kbd>v</kbd>粘贴
2.表单
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框select
多行选择设置：multiple=“multiple”
（3）文本域textarea
（4）复选框checkbox
.checkbox，水平显示：.checkbox-inline
（5）单选择按钮
.radio， 水平显示：.radio-inline
（6）按钮
1）使用button 实现
基础样式： btn
附加样式：btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用a div 等制作按钮
3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <p class="help-block">这里是块级帮助文本的实例。</p> </div> <div class="checkbox"> <label> <input type="checkbox" class="checkbox-inline">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> <button type="submit" class="btn btn-primary">提交</button> <button type="submit" class="btn btn-info">提交</button> <button type="submit" class="btn btn-success">提交</button> <button type="submit" class="btn btn-warning">提交</button> <button type="button" class="btn btn-danger disabled">提交</button> <button type="button" class="btn btn-link btn-lg">按钮</button> </form> <!-- 水平表单 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> <!-- 内联表单 --> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件输入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox" class="checkbox-inline">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </body>
3.表格
表格类
下表样式可用于表格中：
类 描述 .table 为任意 添加基本样式 (只有横向分隔线)
.table-striped 在 .table-bordered 为所有表格的单元格添加边框 .table-hover 在 .table-condensed 让表格更加紧凑 联合使用所有表格类 (https://www.runoob.com/try/try.php?filename=trybs_ref_table-all) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
下表的类可用于表格的行或者单元格：
类 描述 .active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> </head> <body> <table style="width:600px;" class="table table-striped table-bordered table-condensed table-hover"> <caption class="h2">条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr> </thead> <tbody> <tr class="active"> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr class="success"> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr class="danger"> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> <tr class="warning"> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> <tr class="info"> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> </body> </html>
4.缩略图
使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class .thumbnail 的 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>缩略图</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="img/1.jpg" alt="..."> <h3>哈哈哈</h3> <p>出生于北京市，中国内地影视女演员、模特。</p> <button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button> <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/1.jpg" alt="..."> <h3>郑爽</h3> <p>出生于沈阳，中国内地影视女演员。小仙女下凡了啦！！！</p> <button class="btn btn-default"><span class="glyphicon glyphicon-hand-left"></span>点赞</button> <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button> </div> </div> </div> <div class="row"> </div> </div> </body>
5.面板
1）创建一个基本的面板，只需要向
元素添加 class
.panel 和 class
.panel-default 即可2）添加面板标题：
使用 .panel-heading class 可以很简单地向面板添加标题容器。
使用带有 .panel-title class 的
–
来添加预定义样式的标题。
3）语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板
4）为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个
包含
.panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含
.panel-body 的，则组件会无中断地从面板头部移动到表格。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>面板</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> </head> <body> <div class="panel panel-warning"> <div class="panel-heading"> <h2 class="panel-title">用户信息列表</h2> </div> <div class="panel-body"> <table style="width: 600px;" class="table table-bordered table-hover table-striped table-condensed"> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr class="active"> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr class="success"> <td>Sachin</td> <td>Mumbai</td> </tr> <tr class="danger"> <td>Sachin</td> <td>Mumbai</td> </tr> <tr class="warning"> <td>Sachin</td> <td>Mumbai</td> </tr> <tr class="info"> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </div> </div> </body> </html>
6.了解bootstrap的插件
菜鸟教程了解：https://www.runoob.com/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/121474.html
