序:

  1、Bootstrap内包含了很多CSS样式和JS插件,可以在我们的HTML文件中先导入Bootstrap的CSS文件和JS文件,然后通过标签继承预设样式的类名来获取样式效果,同时在Bootstrap的官网文档中cv相应的代码实现具体样式和动态效果。

  2、Bootstrap的JS插件是依赖于jQuery语法实现的,所以导入Bootstrap的JS文件之前需要已经导入了jQuery文件,相关代码才会生效。

一、布局容器:使用Bootstrap制作页面时,可以开始先用布局容器来规划整体布局。

  1、.container:两侧留白。

  2、.container-fluid:两侧不留白。

二、栅格模式

  1、.row:将一个区域划分为12个相等的单位区域。

  2、.col-md-6:在已划分好的区域内声明子区域所占单位区域的个数。

  3、匹配当前屏幕的栅格显示:如果都使用,就可以兼容所有硬件媒体的屏幕。

    ①.col-xs-:手机屏幕。

    ②.col-sm-:平板屏幕。

    ③..col-md-:普通显示器。

    ④.col-lg-:特大显示器。

  4、.col-md-offset-3:向右移动若干单位区域。

三、排版:Bootstrap将所有原生的HTML标签的文本字体统一设置成了人类视觉比较习惯的样式。

四、颜色

  1、.active:一般用于鼠标悬停反馈,浅灰色。

  2、.success:一般用于提示成功,浅绿色。

  3、.info:一般用于普通提示,浅蓝色。

  4、.warning:一般用于提醒或警示,浅黄色。

  5、.danger:一般用于提示错误或不安全,浅红色。

五、表格

  1、.table:基本样式,无论使用其他何种表格样式,都需要先使用基本样式。

  2、.table-hover:悬停样式。

  3、.table-striped:斑马纹间隔样式。

  4、.table-bordered:表格边框。

六、表单

  1、.text-center:文本居中。

  2、.form-control:美化输入框,并拉伸为最宽,表单中checkbox和radio标签一般不使用该样式,其他标签建议使用。

  3、.has-error:输入框边框变红,一般用于提示错误,不是直接给input标签使用的,需要在外面套一个标签使用该样式。

七、按钮:可以把任意标签设置为按钮的样式。

  1、.btn:基本样式,无论使用其他何种按钮样式,都需要先使用基本样式。

  2、.btn-default:一般用于默认项,白色。

  3、.btn-primary:一般用于首选项,深蓝色。

  4、.btn-success:一般用于成功项,浅绿色。

  5、.btn-info:一般用于普通项,浅蓝色。

  6、.btn-warning:一般用于提醒项,浅黄色。

  7、.btn-danger:一般用于危险项,浅红色。

  8、.btn-lg:大按钮。

  9、.btn-sm:小按钮。

  10、btn-xs:超小按钮。

  11、btn-block:拉伸为最宽,并且转换为板块级标签。

八、图标:可以直接用span标签继承对应的类名获取效果,并且可以用修改文本颜色的方式修改该图标的颜色。

九、导航条:

  1、.navbar navbar-inverse:黑色导航条。

  2、.navbar navbar-default:白色导航条。

十、分页器:直接CV,可以另外给li标签加上.active,将其转换为激活态。

十一、弹框:https://lipis.github.io/bootstrap-sweetalert/

  

posted on 2020-05-14 05:01  焚音留香  阅读(114)  评论(0编辑  收藏  举报