js离线文档_最受欢迎的 HTML、CSS 和 JS 框架

  前段时间,小编复习了一下前端框架--bootstrap,今天给大家分享一下!

   有些时候,当我们打开一个网页,最开始注意的大概就是网页的设计布局了,然后就会感慨,怎么他们是这么好,页面太绚丽了!!

  在没有接触框架之前,页面的布局,格式的设定基本是根据css和javascript等来进行页面的美化,这样代码量就大大增加,所以就诞生了一个方便开发人员进行页面编写的框架。---------Bootstrap

简介

  Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。他是一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。这样就减少了大量代码的编写。

  它的一些好处:

1. 定义了很多的css样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。: 同一套页面可以兼容不同分辨率的设备。

  接下来入门:

   大家可以访问它的中文网:https://www.bootcss.com进行学习。也可以下载它的离线文档,方便在没有网的情况下使用。然后把下面三个文件夹拷贝到项目中。

38d10e18a2254ad3873c5870c07f72f4.png

接下来就是引入了:

<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js">script>
好处1.响应式布局:依赖于栅格系统:

那么什么是响应式布局呢,简单来说就是同一套页面可以兼容不同分辨率的设备

栅格系统:将一行平均分成12个格子,可以指定元素占几个格子。

它的使用步骤:
  1. 定义容器。相当于之前的table

* 容器分类:

1. container:两边留白

2. container-fluid:每一种设备都是100%宽度

    2. 定义行。相当于之前的tr   样式:row

    3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目

* 设备代号:

1. xs:超小屏幕 手机 (<768px):col-xs-12

2. sm:小屏幕 平板 (≥768px)

3. md:中等屏幕 桌面显示器(笔记本) (≥992px)

4. lg:大屏幕 大桌面显示器(台式机) (≥1200px)

    <div class="container">                <div class="row">                        <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>          div>    div>

好处2.CSS样式和js插件(样式等有很多,详细的参考中文网)

55658748efefc8d304547e8a1bba9199.png

1.全局css样式

(1). 按钮:  默认样式,

下面是一些按钮的样式,使用时可以参考文档,当然还有其他的一些样式比如尺寸等。

d90903a806bd75f5db532df14e7c889e.png

<button type="button" class="btn btn-primary">(首选项)Primarybutton><button type="button" class="btn btn-success">(成功)Successbutton><button type="button" class="btn btn-info">(一般信息)Infobutton><button type="button" class="btn btn-warning">(警告)Warningbutton><button type="button" class="btn btn-danger">(危险)Dangerbutton><button type="button" class="btn btn-link">(链接)Linkbutton>

(2). 图片::图片在任意尺寸都占100%

  图片形状:

:方形

:圆形

:相框

(3). 表格:


* table:基本的样式

* table-bordered: 类为表格和其中的每个单元格增加边框。

* table-hover:鼠标悬停状态下作出响应。

                             *......

(4). 表单:

*  :类可使其内容左对齐并且表现为 inline-                       block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时                                (视口宽度再小的话就会使表单折叠)。

                        *  :并联合使用 Bootstrap 预置的栅格                                       类,可以将label 标签和控件组水平并排布局

                        * ...... 

(5).........

2.组件

* 导航条:类似下面的样子。现实生活中,每个网站都会用到导航条。

默认样式的导航条:

183780eb14f6f821f4b741ea27299989.png

class=  <div class="container-fluid">        <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigationspan>        <span class="icon-bar">span>        <span class="icon-bar">span>        <span class="icon-bar">span>      button>      <a class="navbar-brand" href="#">Branda>    div>        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>        <li><a href="#">Linka>li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>          <ul class="dropdown-menu">            <li><a href="#">Actiona>li>            <li><a href="#">Another actiona>li>            <li><a href="#">Something else herea>li>            <li role="separator" class="divider">li>            <li><a href="#">Separated linka>li>            <li role="separator" class="divider">li>            <li><a href="#">One more separated linka>li>          ul>        li>      ul>      <form class="navbar-form navbar-left">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        div>        <button type="submit" class="btn btn-default">Submitbutton>      form>      <ul class="nav navbar-nav navbar-right">        <li><a href="#">Linka>li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>          <ul class="dropdown-menu">            <li><a href="#">Actiona>li>            <li><a href="#">Another actiona>li>            <li><a href="#">Something else herea>li>            <li role="separator" class="divider">li>            <li><a href="#">Separated linka>li>          ul>        li>      ul>    div>  div></nav>

* 分页条:分页条用的也比较多,当数据检索或者其他数据操作的时候,一页展示不出来,这是分页条就提供了方便。

默认的分页条:

e848cf4243f90044e85695c9e9ab2201.png

<nav aria-label="Page navigation">  <ul class="pagination">    <li>      <a href="#" aria-label="Previous">        <span aria-hidden="true">«span>      a>    li>    <li><a href="#">1a>li>    <li><a href="#">2a>li>    <li><a href="#">3a>li>    <li><a href="#">4a>li>    <li><a href="#">5a>li>    <li>      <a href="#" aria-label="Next">        <span aria-hidden="true">»span>      a>    li>  ul>nav>

* ......

3.插件

*轮播图:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">    <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>    <li data-target="#carousel-example-generic" data-slide-to="1">li>    <li data-target="#carousel-example-generic" data-slide-to="2">li>  ol>    <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="..." alt="...">      <div class="carousel-caption">      div>    div>    <div class="item">      <img src="..." alt="...">      <div class="carousel-caption">      div>    div>  div>    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>    <span class="sr-only">Previousspan>  a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>    <span class="sr-only">Nextspan>  a>div>

好了,今天就分享到这里,总结的不是太全面,请见谅!欢迎大家投稿交流!!

4bf91a11ae7246dc67577932ce40101b.png

相关资源:css离线参考手册
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页