bootstrap基础和部份组件 -- (笔记一)

bootstrap:

打开网页: https://v2.bootcss.com/getting-started.html 或其它网站

点击下载bootstrap, 即可得到bootstrap.zip文件, 解压后的目录结构如下:

所有的JavaScript插件都依赖jquery库, 所以在使用bootsrap之前时需要先导入jquery

导入bootstrap和jquery, 构成基本的bootstrap页面(bootstrap.css, jquery.js, bootstrap.js):

<!DOCTYPE html>
<html><head><title>Bootstrap Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 导入bootstrap.css(注意这个rel属性是必须的) --><link href="css/bootstrap.min.css" rel="stylesheet" media="screen"></head><body><h1>Hello, world!</h1><!-- 导入jquery.js --><script src="http://code.jquery.com/jquery.js"></script><!-- 导入bootstrap.js --><script src="js/bootstrap.min.js"></script></body>
</html>

Bootstrap使用时, 文档类型需为 HTML5(<!DOCTYPE html>), 否则可能会有一些问题

Bootstrap 为屏幕、排版和链接设置了基本的全局样式:

移除了body的 margin
设置了 body 的背景颜色 background-color: white;
使用 @baseFontFamily、@baseFontSize 和@baseLineHeight 属性作为我们排版的基础
通过 @linkColor 设置全局链接颜色，并且，当链接处于 :hover 状态时才会带有下划线

meta标签设置:

Bootstrap3的设计目标是移动设备优先

为了让 Bootstrap 开发的网站对移动设备更友好，需要在网页的 head 之中添加 viewport meta标签

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

device-width 可以确保它能正确呈现在不同设备上

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放

添加 user-scalable=no 可以禁用其缩放功能

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

网格系统:

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

使用 .container 创建的容器，以便获得适当的对齐（alignment）和内边距（padding）
使用.row创建的水平组, 在水平组中可放置多个列.col-xs-*
因此使用 .container --> .row --> .col-xs-* 用于快速创建网格布局

使用网格系统

<body>
<div class="container"><div class="row" ><div class="col-xs-3"  style="background-color: #F00"><p>11111111111</p></div><div class="col-xs-3" style="background-color: #0F0"><p>11111111111</p><p>11111111111</p></div><div class="col-xs-3" style="background-color: #00F"><p>11111111111</p></div><div class="col-xs-3" style="background-color: #dedef8"><p>11111111111</p></div></div>
</div>

col-xs-* 手机(<768px), 一直是水平不折叠

col-ms-* 平板电脑(>=768px), 以折叠开始，断点以上是水平的

col-md-* 中型电脑(>=992px), 以折叠开始，断点以上是水平的

col-lg-* 大型台式(>=1200px), 以折叠开始，断点以上是水平的

即他们开始折叠的的屏幕大小不一样

偏移: 使用offset表示偏移多少个网格, 它相对于自己本身的原来位置偏移

class="col-md-6 col-md-offset-3"

.col-md-push-* 和 .col-md-pull-* 一个表示前进一个表示后退

嵌套行和列

首先是.container, 然后在里面是.row, .row里面是.col-md-*

而在.col-md-*里面还可以添加.row, 这就是行列嵌套

标签默认样式:

bootstrap对html大部份元素的默认样式做了修改, 它的表现比默认html元素好看, 这省略掉很多样式的基本设置

比如<small>: 比默认html的small标签颜色更浅字体更小(显然这比默认样式好看)

比如<abbr>: 会带有问号标识, 且样式更好看

比如<blockquote>: 里面放置一个<small>则会添加一个短横线, 表示引用

一些文本样式:

.lead      使段落突出显示
.small    设定小文本 (设置为父文本的 85% 大小)
.text-left    设定文本左对齐
.text-center    设定文本居中对齐
.text-right   设定文本右对齐
.text-justify    设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap     段落中超出屏幕部分不换行
.text-lowercase  设定文本小写
.text-uppercase  设定文本大写
.text-capitalize     设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote-reverse   设定引用右对齐
.list-unstyled   移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline      将所有列表项放置同一行
.dl-horizontal    该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable   使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

直接使用就行了, 它就会带bootstrap赋予的样式:

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

表格:

bootstrap的表格, 只需要添加table样式即可以得到不错的一个表格展示

bootstrap也给出了表单元素的基本样式

<table class="table"><caption>基本的表格布局</caption><thead><tr><th>名称</th><th>城市</th></tr></thead><tbody><tr><td>Tanmay</td><td>Bangalore</td></tr><tr><td>Sachin</td><td>Mumbai</td></tr></tbody>
</table>

给行或列添加背景色:

<tr class="active"><td>产品1</td><td>23/11/2013</td><td class='info'>待发货</td>
</tr>
<tr class="success"><td>产品2</td><td>10/11/2013</td><td>发货中</td>
</tr>
<tr class="warning"><td>产品3</td><td>20/10/2013</td><td>待确认</td>
</tr>
<tr class="danger"><td>产品4</td><td>20/10/2013</td><td>已退货</td>
</tr>

精简表格: 加上这个样式table-condensed

鼠标悬停: 加上table-hover样式

响应式表格: 加上table-responsive样式

边框表格: 加上table-bordered样式

条纹表格: 加上table-striped样式

表单:

创建基本表单的基本步骤:

向form元素添加属性role="form"
把标签和控件放在<div class="form-group">...</div>中
对表单元素添加 class ="form-control" 可以改变其展示样式

<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"> 请打勾</label></div><button type="submit" class="btn btn-default">提交</button>
</form>

内联表单 <form class="form-inline" role="form">

水平表单 <form class="form-horizontal" role="form"> 水平表单可能用更多

默认情况下一个form-group中的内容排列在一行

注: col-sm-* form-control一起使用的话, col-sm-*不能起作用

比如: <input class='col-sm-6 form-control'>

可以换成两个标签分别样式 : <div class='col-sm-6'> <input class='form-control'/> </div>

input标签

<form role="form"><div class="form-group"><label for="name">标签</label><input type="text" class="form-control" placeholder="文本输入"></div></form>

Textarea标签

<form role="form"><div class="form-group"><label for="name">文本框</label><textarea class="form-control" rows="3"></textarea></div>
</form>

复选框Checkbox 和单选框Radio

对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上

选择框Select

<form role="form"><div class="form-group"><label for="name">下拉列表</label><select class="form-control"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option></select><label for="name">按住ctrl键可多选的选择列表</label><select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option selected>4</option><option>5</option></select></div>
</form>

在一个水平表单内的表单标签后放置纯文本时使用 class .form-control-static

<div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div>
</div>

设置表单的宽高

使用 input-lg 和 网格占比 来设置表单的高度和宽度

<select class="form-control input-lg"> 大

<input class="form-control input-sm" type="text"> 小

<div class="col-sm-1"> 占1/12份

禁用控件

禁用多个

</fieldset>

Bootstrap 包含了错误、警告和成功消息的验证样式

bootstrap按钮:

class="btn" 带有圆角灰色按钮的外观, 可用于<a>, <button>, 或 <input> 元素上

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

按钮组

将一组按钮放在一起, 中间没有间隙

<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>

统一设置按钮组的大小

 <div class="btn-group btn-group-lg"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div><h3>默认大小按钮:</h3><div class="btn-group">...</div><h3>小按钮:</h3><div class="btn-group btn-group-sm">...</div><h3>超级小按钮:</h3><div class="btn-group btn-group-xs">...</div>

垂直按钮组

<div class="btn-group-vertical"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>

自适应大小按钮组

<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">Apple</a><a href="#" class="btn btn-primary">Samsung</a><a href="#" class="btn btn-primary">Sony</a>
</div>

自适应按钮组, 如果是button, 则需要在button元素外加上 .btn-group 类来包裹

自适应按钮组, 一般就用a元素, 比button简单

  <div class="btn-group btn-group-justified"><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Samsung</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Sony</button></div></div>

内嵌按钮组

在一个按钮组(btn-group)中放置一个button, 再并列一个ul元素, 即它两个做为一个按钮组

<div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div>

分隔按钮组

在一个按钮组中有多个button, 在目标button后面加一个ul元素

和前面一内嵌按钮组的一点区别就是目标button中没有内容, 只有一个图标而已(span), 而上面有文字Sony

<div class="btn-group"><button type="button" class="btn btn-primary">Sony</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div>

bootstrap对图片的样式

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

文本样式:

<p class="text-danger">该段落使用了的文本样式</p>
<p class="text-warning">该段落使用了的文本样式</p>
<p class="text-info">该段落使用了的文本样式</p>
<p class="text-success">该段落使用了的文本样式</p>
<p class="text-primary">该段落使用了的文本样式</p>
<p class="text-muted">该段落使用了的文本样式</p>

背景样式:

<p class="bg-primary">该段落使用了类样式</p>
<p class="bg-success">该段落使用了类样式</p>
<p class="bg-info">该段落使用了类样式</p>
<p class="bg-warning">该段落使用了类样式</p>
<p class="bg-danger">该段落使用了类样式</p>

其它样式:

使用pull-left 与pull-right左右浮动

产生浮动后, 浮动上去的元素会成为内联块元素(可设置高度等), 脱离文档流

浮动产生后, 必然要造成浮动塌陷, 影响元素布局

因为脱离文档流, 则包裹浮动元素的div就是空元素了, 即这个div没内容了 -- 塌陷

在这个div上加clearfix类样式, 即可清除浮动影响(效果就是再次撑开这个div, 其高度就是撑开的最大高度)

<body><div class="clearfix bg-warning"><div class="pull-left  bg-success" style="height:100px">向左快速浮动(左浮动)</div><div class="pull-right bg-info">向右快速浮动(右浮动)</div></div><div>其它元素, 放在浮动元素 .clearfix 外面</div>
</body>

使用center-block直接把元素设置为块, 并居中

<span class="center-block bg-success" style="width:150px; height:100px">该 div 显示在中间</span>

使用class = hidden隐藏元素, 当然也支持html的hidden属性

<p class="hidden" hidden>该段落强制隐藏</p> --- hidden类样式与hidden属性都可以使用

使用caret显示下拉式功能, 可用放于一个按钮中

需要: 1.按钮中属性 data-toggle = 'dropdown', 2.类样式 class='dropdown-toggle'

3.ul中class类样式 class='dropdown-menu' , 4.而且还要在按钮组.btn-group里面

<div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">一个链接</a></li><li><a href="#">另一个链接 link</a></li><li><a href="#">其他功能</a></li></ul>
</div>

使用close样式可以设置成关闭图标的样式

使用 class='sr-only' 来把元素对所有设备隐藏，除了屏幕阅读器

<label class="sr-only" for="email">Email 地址</label>

bootstrap基础和部份组件 -- (笔记一)相关推荐

Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
Bootstrap基础二十七多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
Hadoop基础-Hdfs各个组件的运行原理介绍
Hadoop基础-Hdfs各个组件的运行原理介绍作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NameNode工作原理(默认端口号:50070) 1>.什么是NameN ...
bootstrap select2 php,JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的 ...
Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
【PM学习笔记】酸梅干超人 - 零基础学Figma学习笔记
原视频链接: B站视频零基础学Figma学习笔记心得体会第1课 - 苹果商店页设计第2课 - 线性图标设计第3课 - 面性图标设计第4课玻璃拟态页设计第5课样式组件功能入门第6课 ...
鸟哥的LINUX私房菜基础学习篇读书笔记 -- 第零章计算机概论（一）
鸟哥的LINUX私房菜基础学习篇读书笔记 -- 第零章计算机概论 (一) 第零章计算机概论 0.1 电脑:辅助人脑的好工具 0.1.1 计算机硬件五大组成部分 0.1.2 一切设计的起点: C ...
Bootstrap V3.3.4 组件
Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...
AI Studio 飞桨零基础入门深度学习笔记4-飞桨开源深度学习平台介绍
AI Studio 飞桨零基础入门深度学习笔记4-飞桨开源深度学习平台介绍深度学习框架深度学习框架优势深度学习框架设计思路飞桨开源深度学习平台飞桨开源深度学习平台全景框架和全流程工具模 ...

bootstrap基础和部份组件 -- (笔记一)

bootstrap基础和部份组件 -- (笔记一)相关推荐

最新文章

热门文章