Bootstrap是一个前端框架,可帮助开发人员启动Web开发程序。
Bootstrap网格系统可以创建一个移动友好和响应式的网站。
Bootstrap封装了许多有用的组件,可以很容易地在网站项目中使用。
Bootstrap 是基于 HTML、CSS、JavaScript 的。
打开代码编辑器并创建一个新的HTML文件
在页面底部包含JavaScript文件 – 在关闭<body>标签(即</body>)之前,以提高网页的性能。
注意css和Javascript的相对路径。
附上来自菜鸟联盟提供的几个链接:
<!– 新 Bootstrap 核心 CSS 文件 –>
<link href=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css“ rel=“stylesheet“>
<!– 可选的Bootstrap主题文件(一般不使用) –>
<script src=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css“></script>
<!– jQuery文件。务必在bootstrap.min.js 之前引入 –>
<script src=“https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“></script>
<!– 最新的 Bootstrap 核心 JavaScript 文件 –>
<script src=“https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js“></script>
网格系统允许我们正确地布局我们网站的内容。
它将屏幕划分为多个行和列,可用于创建各种类型的布局。
一旦我们定义了行和列,我们可以在其中放置HTML元素。
Bootstrap的网格系统将屏幕划分为列 – 每行最多12个。
列宽根据屏幕的大小而变化。
因此,Bootstrap的网格系统是响应式的,因为当浏览器窗口的大小改变时,列动态地调整大小。
Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。
用法: <button class=”btn btn-XX”>name </button>
按钮有各种颜色选项:
- btn-default为白色
- btn-primary为深蓝色
- btn-success为绿色
- btn-info为浅蓝色
- btn-warning为橙色
- btn-danger为红色
各种尺寸:
- btn-lg用于大按钮
- btn-sm用于小按钮
- btn-xs用于超小的按钮
还有一些辅助类的按钮可用:
- btn-block将使按钮跨越整个网格
- active将使按钮看起来像它当前点击
- disabled将使按钮无法单击并显示渐变色。
下面是在站点或 app 中使用图标的通用语法:
<i class=”icon_class_name”></i>
引用链接: <link rel=”stylesheet” href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css”>
一个比较实用的东东,可以写在类似于按钮里面。下面附一段代码和其效果图。
关于Bootstrap,还有好多好多,慢慢探索吧。(o゚▽゚)o