该框架已经帮我们写了很多页面样式,如果需要使用,只需要下载对应文件直接cv即可
在使用Booststrap的时候,所有发页面样式只需要通过修改class属性来调节即可
中文文档查询:Bootstrap中文网
twitter-bootstrap (v5.3.1) - Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/twitter-bootstrap/
Bootstrap的js代码是基于jQuery的
在使用bootstrap做动态效果时一定要引入jQuery!!!
布局容器是指用于组织和排列其他元素的容器或容器类,在前端开发中,常用的布局容器有以下三种
块级布局容器会生成一个块级框,它可以使用display属性设置为“block”、“flex”或者“grid”。常见的HTML元素如、、等都是块级布局容器。块级容器会独占一行,并通过CSS属性进行自上而下的垂直排列。
行内布局容器会生成一个行内框,它可以使用display属性设置为"inline"或者"inline-block"。常见的HTML元素如、、等都是行内布局容器。行内容器会水平地从左到右排列,直到行的边缘,然后自动换行
弹性布局容器时CSS3中的一种新型布局技术,通过定义父元素作为弹性容器,将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括:flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活排列的方式
Title
/*左右两侧有留白*/
/*左右两侧没有留白*/
Title
写一个row就是将所在区域划分成12份
写一个col-md-6获取想要的份数栅格参数
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C .container
最大宽度None (自动) 750px 970px 1170px 类前缀 .col-xs-
.col-sm-
.col-md-
.col-lg-
列(column)数 12 最大列(column)宽 自动 ~62px ~81px ~97px 槽(gutter)宽 30px (每列左右均有 15px) 可嵌套 是 偏移(Offsets) 是 列排序 是 列偏移
使用
.col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用*
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将.col-md-4
元素向右侧偏移了4个列(column)的宽度。
.col-md-4.col-md-4 .col-md-offset-4.col-md-3 .col-md-offset-3.col-md-3 .col-md-offset-3.col-md-6 .col-md-offset-3嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的
.row
元素和一系列.col-sm-*
元素到已经存在的.col-sm-*
元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。
Level 1: .col-sm-9Level 2: .col-xs-8 .col-sm-6Level 2: .col-xs-4 .col-sm-6列排序
通过使用
.col-md-push-*
和.col-md-pull-*
类就可以很容易的改变列(column)的顺序。
.col-md-9 .col-md-push-3.col-md-3 .col-md-pull-9排版
标题
HTML 中的所有标题标签,
到
均可使用。另外,还提供了
.h1
到.h6
类,为的是给内联(inline)属性的文本赋予标题的样式。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
页面主体
Bootstrap 将全局
font-size
设置为 14px,line-height
设置为 1.428。这些属性直接赋予元素和所有段落元素。另外,
(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
内联文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the
tag.
You can use the mark tag to highlight text.
Copy
You can use the mark tag to highlight text.
被删除的文本
对于被删除的文本使用
标签。
This line of text is meant to be treated as deleted text.
Copy
This line of text is meant to be treated as deleted text.无用文本
对于没用的文本使用
标签。
This line of text is meant to be treated as no longer accurate.Copy
This line of text is meant to be treated as no longer accurate.插入文本
额外插入的文本使用
标签。
This line of text is meant to be treated as an addition to the document.
Copy
This line of text is meant to be treated as an addition to the document.
带下划线的文本
为文本添加下划线,使用
标签。
This line of text will render as underlined
Copy
This line of text will render as underlined
利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本,使用
标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的
元素被设置不同的
font-size
。你还可以为行内元素赋予
.small
类以代替任何元素。
This line of text is meant to be treated as fine print.
Copy
This line of text is meant to be treated as fine print.
着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
Copy
rendered as bold text
按钮
尺寸
图片
形状
颜色
...
...
...
...
...
清除浮动
...// Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a mixin .element { .clearfix(); }
图标
span标签
V