BootStrap的使用

是别人帮我们已经写好的css样式,我们如果想要使用这个BootStrap:

下载BootStrap

使用:在页面上引入BootStrap+自定置

先在网上下载好BootStrap 并导入到Pycharm

BootStrap的使用_第1张图片

引入BootStrap:(注意引入的是“bootstrap.css")

BootStrap的使用_第2张图片

 导航

去BootStrap上找到“导航条”,并复制下面代码,粘贴到我们的HTML文件里的中

BootStrap的使用_第3张图片

 之后根据自己的需求更改css代码即可

其他的网页组件也是同理,在官网上找到自己想要的样式,复制粘贴下来之后进行修改

栅格

把整体页面划分为了12格

分类

响应式,根据屏幕宽度不同会自动调整

.col-lg- 
.col-md- 
.col-sm- x

非响应式

1
2

 列偏移

不加列偏移的时候,元素总会顶着最左边如:

 加上列偏移后

1

也就是col-sm-offset-x 这里x指需要偏移几格 

 

 container

使页面两边有空白部分

左边
右边

 

我们查看网页源码发现它的container是下面这样写的:(和我们以前写的差不多,使用container-fluid也可以) 

BootStrap的使用_第4张图片

 clearfix(清除浮动)

和我们原来写的

效果一样

图标

fontawesome组件(去官网下载好,之后用法和BootStrap相似)

BootStrap的使用_第5张图片

 引用

之后去官网找对应的图标,将其HTML复制下来使用即可,例如想要“保存”的图标时

BootStrap的使用_第6张图片

 将它加入我们写好的代码中

原来空荡荡的新建就有图标啦

BootStrap的使用_第7张图片BootStrap的使用_第8张图片

BootStrap依赖JavaScript的类库,jQuery

需要下载jQuery,在页面上应用上jQuery

至此,CSS的学习就暂时告一段落啦,后面要开始JS的学习

你可能感兴趣的:(Python,Web开发,bootstrap,css,前端)