Bootstrap官网样式party_1-全局css样式

下载用于生产环境的Bootstrap

Bootstrap官网样式party_1-全局css样式

Bootstrap官网样式party_1-全局css样式

常用的文件

Bootstrap官网样式party_1-全局css样式

1、对于ie版本的设置2、移动视角设置3link引入bootstrap文件

为了方便创建文件可以在pycharm中设置默认创建文件格式

打开settings:

Bootstrap官网样式party_1-全局css样式

Bootstrap的应用:

做页面先参考实例精选

Bootstrap官网样式party_1-全局css样式

栅格系统:栅格参数,堆叠到水平排列,流式布局格式(在pc屏幕和在移动端显示),列的偏移,列嵌套,列排序,

排版:标题,主体,对齐,大小写,缩略语(悬浮显示的内容),地址,引用(名人名言)

代码:内联代码,形象化提示用户输入内容,代码块,

表格:表格样式,设置边框,悬浮的状态,背景颜色状态,响应式表格(能控制滚动条)

表单:水平排列的表单,单个输入框或者文本框单选多选框,静态控件(上面账号下面密码,只能修改密码)、只读样式、校验的状态,改变输入框的大小

按钮:设置大小、颜色、位置(a,button,input)

图片:1响应式图片,为了在父级更好的缩放2图片的形状

辅助类:设置字体颜色,背景颜色,三角符号,让标签快速浮动,让内容块居中,清除浮动,显示或者隐藏,将文本内容替换成背景图。

研究完模板首先要先布局

Bootstrap官网样式party_1-全局css样式

页面的布局

Bootstrap官网样式party_1-全局css样式

通常会先写一个行,然后后面紧跟一个列。列支持嵌套,每一个列内都可以分成12

Bootstrap官网样式party_1-全局css样式

Bootstrap官网样式party_1-全局css样式

横行站满屏

栅格系统:

Bootstrap官网样式party_1-全局css样式

    

Bootstrap官网样式party_1-全局css样式

Bootstrap官网样式party_1-全局css样式

每个格的类前缀

数字代表占用每个栅格的比例(1/12)

一行总格12列 

Bootstrap官网样式party_1-全局css样式

在style中设置 

显示器最大宽度大于600px的时候变化样式c1.{中写各种样式}

Bootstrap官网样式party_1-全局css样式

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzydwf.html