Bootstrap：前端框架

最新推荐文章于 2022-06-13 18:27:34 发布

UNDEFINED_AUBE

最新推荐文章于 2022-06-13 18:27:34 发布

阅读量725

点赞数

本文链接：https://blog.csdn.net/UNDEFINED_AUBE/article/details/78756926

版权

Bootstrap：前端框架

一、前言

1、设置全局CSS样式

（1）基本的HTML元素均可以通过class设置样式得到增强效果

2、组件：可复用组件

3、JS插件

使用Bootstrap只需要加样式就可以实现较好的效果，不用自己写代码

需要添加用移动端的meta标签：viewport meta标签

width属性控制设备的宽度。假设的网站被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上

initial-scale=1.0确保网页加载时以1:1的比例呈现

可以直接在Bootstrap中文网找到“基本模板”，拷贝下来使用，里面的<link>就是引入了css

BS栅格系统：bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列，包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类，即：

1、bootstrp是移动设置优先

2、bootstrap的栅格系统最多12列

3、bootstrap中包含了许多预定义的类

4、通常我们写的页面里浏览器缩小到一定程度时页面就会错位、变形，但在bootstrap中不会，因为它是自适应的

二、Bookstrap网格系统的工作原理

1、怎么使用bookstrap

（1）行必须放在.container class内，以便获得bookstrap设置的对齐(alignment)和内边距(padding)

（2）使用row来创建一行，每行多列

（3）内容应该放在列内，且唯有列可以是行的直接子元素。row>col 正确写法行>列

行里面一定要放列，列里面才能放内容

（4）预定义的网格类，比如.row和.col-xs-4可用于快速创建网格布局

（5）列通过内边距(padding)来创建列内容之间的间隙，想要改变间隙就用负的margin来写

（6）网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列就使用三个.col-xs-4

2、栅格选项

bookstrap栅格把设备分为四种：超小设备（手机）、小型设备（平板）、中型设备（笔记本电脑）、大型设备（大尺寸显示器）。这四种设备各自的列数量之和都不可以超过12，且各自的列有不同的class前缀做标识。超小设备用.col-xs，小型设备用.col-sm，中型设备用.col-md-，大型设备用.col-lg-，不论哪种设备，他们的间隙都是30px（指列的padding-left：15px和padding-right：15px）

三、bookstrap排版

使用bookstrap的排版特性可以创建标题、段落、列表以及其他内联元素。实际上它是把大部分html的基本标签加了初始样式而已。

1、标题：bookstrap中定义了所有的html标题（h1到h6）的样式

（1）内联子标题：如果需要向任何标题添加一个内联子标题，只需要在标题标签中添加<small>，用small标签包裹副标题的内容（或是为元素添加.small类，会得到一个字号更小颜色更浅的文本）

使用bookstrap时需要按照它的规则来创建相关元素而不要自己去写样式，否则bookstrap的使用就没有了意义

2、引导主体副本：为了给段落添加强调文本则可以添加class="lead"，将会得到更大、行高更高的文本，作用相当于是文章摘要

3、对齐类：将文字对齐的类。一般用在p标签上(用在div上不符合规范，用在span标签不能生效)

（1）class="text-center"：文字居中显示

（1）class="text-left"：文字靠左显示

（1）class="text-right"：文字靠右显示

4、强调类：通过颜色表示强调。

（1）text-muted：减弱（文字颜色变浅）

（2）text-warning：这是警告色（橙灰色）

（3）text-danger：这是错误提示（红色）

（4）text-info：这只是信息（蓝色）

（5）text-success：这是正确的强调信息（绿色）

5、缩略语(注意这个不是类)

（1）在html4中有一个元素abbr用来指示简写或缩写，它使用title属性放完整内容，当鼠标悬停在缩写词上时就会显示title的内容。bookstrap实现了对html<abbr>元素的增强样式，缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有问号的指针

（2）address：bookstrap中为<address>地址标签进行了样式的重写，让联系信息以最接近日常使用的格式呈现。在html中address标签是以斜体显示的，而在bookstrap让它以正常字体显示。

6、表格

（1）用bookstrap添加表格就要添加.table类，这是bookstrap表格的基本样式。会添加很少的padding，表格的水平线，另外把每个单元格平均分开。

（2）可选样式

①.table-striped：为表格提供了斑马线的样式，原理是在表格内，通过:nth-shild CSS选择器为表格中的行添加斑马纹样式（表格行的背景色改变，背景色是可以自定义的，用浏览器的检查元素，然后改值，再复制到自己的代码中就可以了；如果是想要整体改变的话就要去min.css在源码里面查找、修改）

②.table-bordered：为表格增加边框

③.table-hover：为表格中的每一行赋予鼠标悬停样式，鼠标划过后会添加一个背景色

④.table-condensed：每个单元格的内补(padding)减半，可使表格更紧凑

7、表单

（1）单独的form标签会被自动赋予一些全局的样式。所有在设置了.form-control类里的<input>、<textarea>和<select>元素都被默认设置宽度为100%，将label元素和input、textarea、select这些元素一起包裹在.form-group中可以获得最好的排列（如果想要让label和input并排显示，使用form-horizontal）

（2）.control-label：使label标签居中显示

8、禁用状态：为输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等），被禁用的输入框颜色更浅，并且还添加了鼠标禁止点击的状态

9、控件尺寸

（1）.input-lg类：大尺寸输入框

（2）.input-sm类：小尺寸输入框

10、按钮、图片

（1）为<a>、<button>、<input>元素添加按钮类(button class)即可使用bookstrap提供的样式

（2）为元素添加btn类和btn-default类可完成按钮的样式。btn是按钮通用样式，btn-default是增强样式

（3）如果<a>元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面/当前页面中的其他部分，就必须要为其设置role="button"属性

11、预定义样式：可以快速创建一个带有预定义样式的按钮

（1）.btn-default：默认样式

（2）.btn-primary：首选项（蓝色）

（3）.btn-success：成功（绿色）

（4）.btn-info：一般信息（浅蓝色）

（5）.btn-warning：警告（橙色）

（6）.btn-danger：危险（红色）

12、按钮的尺寸

（1）.btn-lg：大按钮

（2）.btn-sm:小按钮

（3）.btn-xs：超小按钮

13、把按钮变为块级元素：通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

14、激活状态：当按钮处于激活状态时，其表现为按压下去（底色、边框颜色更深，向内投射阴影）。对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。但是<button>也可以用.active（由于:active是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加.active类）

15、禁用状态：通过为按钮设置disabled="disabled"属性就可以呈现出无法点击的效果

我们把.disabled作为工具类使用，就像.active类一样，因此不需要增加前缀，它是通用的类，不仅可以放在按钮上，也可以应用在其他元素上

16、图片

（1）图片形状：通过为<img>元素添加以下类可以让图片呈现不同的效果

<1>img-rounded：圆角

例如：<img src="" alt="" class="img-rounded">

<2>img-circle：圆

<3>img-thumbnail：双线

17、关闭按钮：直接就是写一个标签写一个close类名

例如：

18、三角符号：通过使用三角符号可以指示某个元素具有下拉菜单的功能

直接就是写一个标签写一个caret类名

例如：

19、元素位置

（1）快速浮动：通过添加pull类，可以将任意元素向左/右浮动

<1>class="pull-left"：向左浮动

<2>class="pull-right"：向右浮动

它的源码实际上是为元素添加了float属性，并且是优先级最高的

（2）排列导航条时如果需要浮动可以使用工具类：.navbar-left或.navbar-right

（3）清除浮动：通过为父元素添加.clearfix类可以清楚浮动

20、让内容块居中：为元素添加.center-block类可以让元素居中显示，不论是行元素还是块元素。前提是要设置元素的宽。

21、显示或隐藏内容:.show和.hidden类可以强制任意元素显示/隐藏。另外，.invisible类可以被用来仅仅影响元素的可见性，这个元素仍然在文档流中

22、字体图标

（1）使用：class="glyphicon glyphicon-search"

<1>需要有一个标签作为图标的容器。glyphicon glyphicon-search可以指向字体图标库中具体的某一个图标

<2>需要用哪个字体图标就在bookstrap中文网的组件一栏里选中，并复制该字体图标下面的内容，粘贴到容器标签的class里面

（2）字体图标可以和其他元素配合使用（如：button+字体图标）

23、下拉菜单：在bookstrap中用button和ul来模拟一个下拉菜单

（1）结构

<div>

<ul>

</ul>

</div>

div是容器，button放置这个列表默认显示的内容，ul中的li相当于是下拉列表中的option

（2）书写格式

<1>通过为下拉列表头部添加data-toggle="dropdown"，并添加dropdown-toggle类，来切换下拉菜单。然后在下拉列表头部中加入一个三角形，指示出点击此处会有更多内容出现

<2>为ul添加dropdown-menu类，不然内容会被显示在外面而没有切换的效果。注意role=“menu”的意思是“描述一个非标准的标签的实际作用”，如果用div做button，那么div的role=“button”，辅助工具就可以认出这实际上是一个button。在这里，ul列表作为menu目录来使用

<3>data-toggle(要注意这个不是一个类，只是一个属性)代表的是一个事件，点击的时候会有切换的效果

例如：

<4>如果给容器添加.dropdown类就会给样式进行一定的布局（比如说字对齐）

<5>如果ul的li不加超链接的话那么呈现出来的列表就是没有加边距的，包括hover的时候也没有效果

（3）.divider类：下拉列表的分割线（是给li加的）：为下拉列表添加一条分割线用于将多个链接分组

（4）禁用的菜单项：为下拉列表菜单中的<li>元素添加.disabled类，从而禁用相应的菜单项

24、导航(除了导航，其他元素最好是放在一个container中)

（1）基本结构

<nav class="navbar navbar-default"> //navbar声明导航样式，navbar-default还可以是反色（就是用浏览器查看元素打开时，当鼠标移到某一代码的时候该代码所在的区域的颜色发生改变）

<div class="container-fluid"> //container-fluid的width是100%，而container的width是用媒体查询获得的动态尺寸

</div>

</nav>

①还可以为导航添加navbar-fixed-top或navbar-fixed-bottom将导航固定在顶部或底部

②如果navbar-default改为navbar-inverse的话只不过是反色改变了颜色，变为了黑色。里面如

过添加文字的话，会根据default/inverse而改变字体的颜色

（2）在导航中添加logo

<div class="navbar-header"> //navbar-header表示元素向左浮动

<a href="#" class="navbar-brand"> //navbar-brand表示会自动加一些边距展示logo

</a>

</div>

</nav>

（3）在导航中添加列表

<ul class="nav navbar-nav"> //nav和navbar的样式不同，nav是专门为导航中的列表添加样式，而navbar是为整个导航添加样式，navbar-nav是让li左浮

<li class="active"><a href="#"></a></li> //active表示把该元素声明为当前正在活动的状态

</ul>

</div>

</nav>

（4）在导航中添加搜索框

<a href="#" class="navbar-link">登录</a> //navbar-link会使超链接的字体和下划线变为灰色

</form>

25、分页：class="pagination"

</ul>

</div>

（1）如果想要表示当前页就在li的class里加active（active加在不同的容器会有不同的显示，是根据容器决定的）

（2）«表示向左的翻页符箭头

»表示向右的翻页符箭头

26、面包屑导航/路径导航（在导航中可以显示当前路径）

<ul class="breadcrumb"> //定义一个面包屑导航

</ul>

</div>

27、徽章badge（徽章的颜色在不同的容器会有不同的效果）

你有未读消息<span class="badge">99+</span>

</button>

</div>

28、缩略图thumbnail

<div class="thumbnail"> //thumbnail定义了缩略图样式

<div class="caption"> //caption定义了标题样式

<p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>

</div>

29、列表组list-group（会默认给每个列表项添加边框）

<div class="list-group"> //定义列表组

<div class="list-group-item"> //定义列表项

<h4><a href="#">教程</a></h4> <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>

</div>

如果不想要边框，可以把边框另外设置样式

30、选项卡：有两个部分，上面的是选项卡的标题(头部)，下面的是选项卡的内容

（1）选项卡头部（一般都是用ul写，一个li代表一个标题）

<div>

<ul class="nav nav-tabs"> //首先是个导航，并且是选项卡的导航

<li class="active"><a href="#xxk1" data-toggle="tab">选项卡1</a></li> //active表示当前选中的状态，data-toggle="tab"有切换的效果

</ul>

</div>

（2）选项卡内容（一个大的div，包含几个小的div，其中小的div和大的div是对应的。也就是说点击一个选项卡，下面会显示出来对应的div）

<div class="content"> //内容的容器

选项卡1的内容

</div>

选项卡2的内容

</div>

<1>tab-pane定义了每个选项卡面板，会将面板默认为隐藏的，点击后再显示并且没有切换的效果

<2>active设置当前为显示状态

<3>fade是切换时的效果，会把元素透明度变为0

<4>in将元素显示出来，把元素透明度变为1，fade和in是要配合使用来达到渐变的效果

<5>每个tab-pane要设置id，并且id被选项卡头部的a标签href所指向，href里面选项卡的id前需要加#（这样才能实现点击选项卡出现对应选项内容的效果）

UNDEFINED_AUBE

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap：前端框架

Bootstrap：前端框架一、前言1、设置全局CSS样式（1）基本的HTML元素均可以通过class设置样式得到增强效果2、组件：可复用组件3、JS插件使用Bootstrap只需要加样式就可以实现较好的效果，不用自己写代码需要添加用移动端的meta标签：viewport meta标签width属性控制设备的宽度。假设的网站被带有不同屏幕分辨率的设备浏览，那么将它设
复制链接

扫一扫