bootstrap学习笔记

最新推荐文章于 2024-04-12 04:26:35 发布

抓不到鱼的叉子

最新推荐文章于 2024-04-12 04:26:35 发布

阅读量166

点赞数

分类专栏：学习笔记文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_38499450/article/details/100772016

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

bootstrap学习笔记

BootStrap 是前端框架，可以非常方便的设计出好看的页面效果。
使用Bootstrap框架可以实现更美观更便捷的前端样式。

基本使用

因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上

<!DOCTYPE html>

接着导入js和css
Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js
接着是 Bootstrap的css，里面定义了各种样式
最后是 Bootstrap的js，用于产生交互效果，比如关闭警告框
注：顺序不要搞错了，否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js

使用的时候只需要套用 bootstrap css中定义的class即可。
如按钮，增加class btn btn-success 就能有bootstrap的效果了
超级简单。

基本样式

Bootsrtap提供了很多的基本样式，这里以按钮为例，很多的样式可以再使用的时候再查看，因为使用方法很类似。
按钮样式可以用于

按钮元素<button>
超链元素<a>
按钮类型的input元素 <input type="button">
提交类型的input元素 <input type="submit">
重置类型的input元素 <input type="reset">

按钮的样式很多，这里使用教程网站的截图来呈现其样式，除了按钮之外，还有很多其他的样式等，包括图片、表单、背景等等。
在这里插入图片描述

这些就是按钮可以设置成的各种样式。

组件

除了基本样式之外，Bootstrap还提供了很多的组件以供使用。包括字体图标、下拉菜单、输入组矿导航栏等等。以字体图标为例：Bootstrap提供了总共263种字体图标可以满足大部分的图标需求
为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录，并且里面有，不能够缺失。
例如：使用一个菊花图案图标：使用class: glyphicon glyphicon-asterisk就可以

插件

Bootstrap提供了插件以供方便快捷。
例如模态窗体、可切换导航栏、展示工具、折叠、轮播等。

例如：静态窗体：

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">提问</h4>
          </div>
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->

在这里插入图片描述