bootstrap

最新推荐文章于 2024-08-31 06:39:46 发布

淡定的小e

最新推荐文章于 2024-08-31 06:39:46 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/e_comeon/article/details/84099153

本文深入讲解了Bootstrap前端框架的核心知识点，包括布局容器、排版标签、列表与表格样式、响应式图片、栅格系统及辅助样式等。同时，介绍了如何引入CSS、JS文件，使用jQuery进行交互，并提供了js数组创建的基础示例。

======================bootstrap知识点================================

引入css文件夹<>
引入jquery
引进js

bootstrap布局容器：<div class="container">固定宽度1170px
container-fluid表示100%
排版的标签:
<h1 class="page-header"></h1> .page-header设置页头，加条线
<small></small>副标题，小一号
<big>副标题，大一号
<strong></strong>加粗
<em></em>倾斜
<del></del>删除线
文本对齐方式：
.text-center
.text-right
字母：
.text-lowercase
.text-uppercase
.text-capitalize首字母大写

列表：
.list-unstyled 去掉列表前面的符号
.list-inline 变成横向

自定义列表：
.dl-horizontal变成横向
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>标题解释</dd>
</dl>

表格：在table标签中
.table加上表格基类样式
.table-bordered 加上外边框
.table-hover 鼠标悬停效果
.table-striped 隔行换色（斑马线效果）
.table-condensed 表格变紧凑
.table-responsive 给table的父元素加，在移动设备中屏幕太小的话有滚动条

在tr td中，.active .danger .info 表示的颜色各不相同

图片：
.img-responsive响应式图片
.img-circle 把图片变成椭圆形
.img-rounded 圆角矩形
.img-thumbnail 给图片加圆角的边框

栅格系统：一定要放在容器中，浏览器窗口自动分配最多12列。行.row 列.col-md-1:表示占一列 col-md-2 表示占2列.....

<head>
<meta name ="viewport" content="width=device-width,inital-scal=1,user-scalable=no">
</head> 屏幕的宽度和设备的宽度一致，初始缩放为1:1,禁止用户缩放

.col-md-offset-n 向右偏移n个列

排序：

语法——.col-md-pull-n 向左移动
.col-md-push-n 向右移动

辅助样式：

情景文本颜色—— .text-muted .text-primary .text-success 、、、、

背景文本颜色 .bg-success

下拉三角 <span class=".caret">

快速浮动 .pull-left .pull-right
清除浮动 .clearfix 给父盒子加