Bootstrap 全局样式的简单介绍

最新推荐文章于 2024-04-05 13:35:41 发布

嵐烨

最新推荐文章于 2024-04-05 13:35:41 发布

阅读量7.9k

点赞数 1

分类专栏： Bootstrap学习心得文章标签： bootstrap 前端开发笔记

本文链接：https://blog.csdn.net/u014516981/article/details/51747691

版权

Bootstrap学习心得专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Bootstrap这个框架相信对于前端来说都不陌生，之前刚接触时就只是“拿来主义”：需要用到时就查看下Bootstrap的官网文档直接将需要的插件或者样式拷贝下来用，最近终于有机会好好静下心来了解这个框架。对Bootstrap的认知也有了一定的改变，下面是本人在学习这个框架的全局样式时的一些个人见解也是我个人觉得在绘制页面时比较实用的几个知识点。内容比较直白通俗，希望路过的各位大牛不要见怪，如若有任何纰漏。还是真心希各位大牛可以指点一二。

一：总结 bootstrap ：

编译 Bootstrap（使用 Bootstrap）

可以通过两种方式使用 Bootstrap ：使用编译后的 CSS 文件（即直接将bootstrap的css样式加入到你的项目中）

或者使用 Less 源码文件。若要编译 Less 文件，请参考“起步”章节的内容以了解如何设置开发环境并运行必须的编译指令。

二：关于bootstrap的全局页面样式：

1.关于表格table

不同形式的表格只需要对类名进行引用即可，Bootstrap为表格设计了如下几个类：

table-bordered:为表格添加边框

table-hover:鼠标移上有效果

table-condensed：让表单更紧凑

table-responsive ：响应式表格，以768px为界。

.active,.success等类是给tr，td等标签添加可识别的样式。

2.关于表单form

label中的for要与input中的id要对应

在bootstrap中不但为表单增加了label标签，还包裹了一个类名为form-group的div即每个input标签的格式为：

<label for="input的id名">input的id名或其他</label>

form-control:为input定义了样式，所以在引用bootstrap中的默认input时一定要加在上。

</div>

为<form>标签添加类。会出现对应的效果：

form-inline：使form中的元素都变成行内元素，在同一行显示

form-horizontal：效果表现与form不加任何类一样，但是form-horizontal为form内置了栅格系统

input的type有text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。且type声明是必须的。

3.关于单选框radio与复选框（多选框）checkbox：

注意：输入框 type="text",type="password"等与单选框type="radio" 多选框 type="checkbox" 除了input中的type类型不同，label所加的位置也不同

输入框：<div class="form-group"><label for=" ">xxx</label><input class="from-control" id="xxx" type="text" placholder=" "/></div>

单选框：<div class="radio"><label><input type="radio" value=" " 这个位置不填默认是able（即布尔值为true），若写上disabled则表示禁用该单选框/></label></div>

复选框：<div class="checkbox"><label><input type="checkbox" value=" " 这个位置不填默认是able（即布尔值为true），若写上disabled则表示禁用该复选框/></label></div>

为让所有的单选框或者复选框在同一行，可将大div的类名改为checkbox-inline，和radio-inline即设置为行内元素。

4.关于按钮：

按钮，在bootstrap中可作为按钮的元素：a,input,button

所有添加了btn btn-* 其中不论是用那种标签的按钮都有hover效果。以下是这三个元素作为按钮时该注意的点

a标签：必须添加role="button"属性；由a标签构成的按钮设置不可用直接添加类disabled 效果是a标签即使加了href链接也无法实现跳转。

<a href="http://baidu.com" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

button:设置type属性 ,其type属性有：type="button" ：普通按钮，type="reset" ：重置按钮 type="submit" ：提交按钮。

<button class="btn btn-default" type="submit">Button</button>

input中的type="submit" 以及type=“button”使input可作为按钮。

bootstrap中给定的按钮的类有多个，一般的格式是 class="btn btn-*" 提供的类有：

（1）外观（颜色）：btn-default(默认)，btn-success(成功)，btn-danger（危险）btn-warning（警告） btn-info（一般展示信息） btn-primary（首选项） btn-link(链接)

（2）外观（大小）：btn-lg（大），btn-md（中），btn-sm（小）

（3）按钮变成激活状态，需要给按钮加上active类。按钮变成不可用状态。添加disabled="disableded"

（4）bootstrap还提供了特殊形式的按钮，例如：关闭按钮<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

5.关于图片img：

响应式图片在bootstrap中要使图片具有响应式功能，须给图片加上类 .img-responsive ，要让图片在具有响应式功能的同时还剧中显示的话需要加入类 center-block

bootstrap中给出的img的类有：

img-responsive 响应式图片(一般是将图片设置为具有响应式功能的时候用到，除了img-responsive，bootstrap还为图片的外观样式设置了另外三个类)

img-circle border-radius为图片宽高的一半的图片即圆形图片

img-rounded 无边框但border-radius为6px图片

img-thumbnail 有4px的边框且border-radius也为4px的图片

要注意的是在IE8及以下的IE浏览器是不支持border-radius属性的。

6.关于辅助类，为页面的色彩效果以及意境有帮助

辅助类

关于文本字体颜色：text-muted（灰色色值为#777），text-primary（蓝色 #428bca），text-success（绿色 #5cb85c），text-info（浅蓝色 #5bc0de），text-warning（橙色 #f0ad4e），text-danger（红色 #d9534f）