Rumah php教程 PHP开发 有了Bootstrap再也不担心网站的前端设计

有了Bootstrap再也不担心网站的前端设计

Jun 07, 2016 pm 05:22 PM
bootstrap css jquery nbsp

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

预处理脚本

虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式.。

一个框架、多种设备

你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是 CSS 媒体查询(Media Query)的功劳。

特性齐全

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

遇到Bootstrap真是有点相见恨晚的感觉。有关网站的前端设计,Bootstrap似乎应用尽有,以前花了很多时间才能设计出来的圆角按纽,现在只需加一个css的类样式就可以轻松搞定,更巧的是可以在线可视化布局网页,有了Bootstrap再也不担心网站的前端设计!

【相关推荐:Bootstrap教程

漂亮的圆角按纽(图)

有了Bootstrap再也不担心网站的前端设计

清新的表格设计

有了Bootstrap再也不担心网站的前端设计


丰富的素材图标

有了Bootstrap再也不担心网站的前端设计

可视化的在线网页布局系统

有了Bootstrap再也不担心网站的前端设计

Bootstrap相关开源项目推荐


Bootstrap 编码规范

Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

Headroom.js 隐藏或展示页面元素

Headroom.js 是一个轻量级、纯 JavaScript 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。

Open CDN 开放CDN服务

Bootstrap中文网联合又拍云存储共同推出了开放CDN服务,我们对广泛的前端开源库提供了稳定的存储和带宽的支持,例如Bootstrap、jQuery等。

stickUp 让页面元素“固定”位置

stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。

LESS 一种动态样式语言

LESS为CSS赋予了动态语言的特性,如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。

Grunt 项目构建工具

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。

Buttons CSS按钮样式库

Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮(button)样式库,图标采用的是Font Awesome,可以和Bootstrap融合使用。

LayoutIt! Bootstrap可视化布局

LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由4wer同学汉化整理。

Unslider jQuery轮播插件

Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。

Bootstrap Switch Bootstrap开关组件

Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。

Sco.js Bootstrap组件增强版

由于大部分的Bootstrap js插件是无法扩展的,因此才有了sco.js,它是对Bootsrap中js插件的增强实现。

iCheck 增强复选框和单选按钮

iCheck让不同浏览器下的复选框(checkboxes)和单选按钮(radio button)更美观、功能更强。

bootstrap-wysiwyg  为Bootstrap定制的可视编辑器

bootstrap-wysiwyg是一个jQuery Bootstrap插件(5KB, < 200 行代码)可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。

Chart.js  精巧的JS图表绘制工具库

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

Preboot  Bootstrap之前世

Preboot是一组用LESS语法书写的混合(mixin)和变量(variable)的集合,目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。

jQuery.Pin  固定页面元素的jQuery插件

jQuery.Pin 能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果。

Responsive Nav  响应式导航

响应式导航(Responsive Nav)是一个很小的JS插件,压缩之后仅有1.7KB,能帮你创建针对小屏幕的可切换式导航

Bsie  Bootstrap IE6兼容方案

Bsie弥补了Bootstrap对IE6的不兼容。目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...

Messenger  非常酷的弹框(Alert)组件

Messenger是一个非常酷的弹框(Alert)组件,能够非常好的与Bootstrap融合,当然,单独使用效果也是非常棒。Messenger自带4套皮肤。

DateTime Picker  日期时间选择器

Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。

jQuery UI Bootstrap  用Bootstrap美化jQuery UI

这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式,而且不会出现样式不统一的现象,Bootstrap和jQuery UI可以完美融合在一起了!

Google Bootstrap  Google风格的Bootstrap

Google的UI素来以简洁著称,现在Bootstrap也来Google Style一把,喜欢Google的就来试试这套Google Bootstrap吧!

Flat UI  Metro风格的Bootstrap

Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。在此强烈推荐!

Metro UI CSS  Bootstrap与Metro融合

Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在,Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。

Font Awesome  Bootstrap专用图标字体

Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。

Simple Icons Icon汇

Simple Icons -- Icon汇。收集众多网站的Logo,并提供高质量、不同尺寸的png格式图片给广大网友,所有Icon版权归其所属公司。

Bootstrap Form Builder  在线表单构造器

Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单,减轻了各位码农手写HTML代码的劳动,而且不会出错。

HTML5 Boilerplate  专业的前端模版

HTML5 Boilerplate 是一套专业的前端模版,用以开发快速、健壮、适应性强的app或网站。

Web Safe Colors  Web安全色

本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。

Bootstrap Docs  Bootstrap文档全集

这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史。Bootstrap本身就是一个传奇,而这些文档就是传奇的见证!

Git Guide  Git简易指南

Git简易指南 -- 帮助你开始使用 git 的简易指南,木有高深内容,;)。

Grumble.js  气泡形状的提示(Tooltip)控件

一个气泡形状的提示(Tooltip)控件,可以在其围绕的元素周围做360度任意定位。

CIKONSS  纯CSS实现的Icon

Cikonss是纯CSS实现的响应式Icon,兼容IE8+。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara melakukan pusat menegak bootstrap Cara melakukan pusat menegak bootstrap Apr 07, 2025 pm 03:21 PM

Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.

Cara memuat naik fail pada bootstrap Cara memuat naik fail pada bootstrap Apr 07, 2025 pm 01:09 PM

Fungsi muat naik fail boleh dilaksanakan melalui bootstrap. Langkah -langkah adalah seperti berikut: Memperkenalkan fail bootstrap CSS dan JavaScript; Buat medan input fail; Buat butang muat naik fail; mengendalikan muat naik fail (menggunakan FormData untuk mengumpul data dan kemudian hantar ke pelayan); gaya tersuai (pilihan).

Cara Menulis Gambar Carousel di Bootstrap Cara Menulis Gambar Carousel di Bootstrap Apr 07, 2025 pm 12:54 PM

Mewujudkan carta karusel menggunakan bootstrap memerlukan langkah -langkah berikut: Buat bekas yang mengandungi carta karusel, menggunakan kelas karusel. Tambah imej karusel ke bekas, menggunakan kelas Carousel-Item dan kelas aktif (hanya untuk imej pertama). Tambah butang kawalan, menggunakan kelas Carousel-Control-PREV dan Kelas-Control-Control-Next. Tambah metrik penunjuk karusel (titik kecil), menggunakan kelas penunjuk karusel (pilihan). Sediakan main balik automatik dan tambahkan data-bs-ride = "carousel &" on the carousel ".

Apa sebab mengapa jadual bootstrap memaparkan kod garbled Apa sebab mengapa jadual bootstrap memaparkan kod garbled Apr 07, 2025 am 11:30 AM

Sebab -sebab utama untuk memaparkan kod garbled pada jadual bootstrap adalah aksara set aksara, masalah pengekodan dan keserasian pelayar yang lemah. Penyelesaian termasuk: 1. Sahkan konsistensi set aksara; 2. Periksa pengekodan penghantaran data; 3. Gantikan penyemak imbas dengan keserasian yang lebih baik; 4. Kemas kini versi jadual bootstrap; 5. Sahkan format data adalah betul; 6. Kosongkan cache penyemak imbas.

Cara susun atur bootstrap Cara susun atur bootstrap Apr 07, 2025 pm 02:24 PM

Untuk menggunakan bootstrap untuk susun atur laman web, anda perlu menggunakan sistem grid untuk membahagikan halaman ke dalam bekas, baris, dan lajur. Mula -mula tambahkan bekas, kemudian tambahkan baris di dalamnya, tambahkan lajur dalam baris, dan akhirnya tambah kandungan dalam lajur. Fungsi susun atur responsif Bootstrap secara automatik menyesuaikan susun atur mengikut titik putus (XS, SM, MD, LG, XL). Susun atur yang berbeza di bawah saiz skrin yang berbeza boleh dicapai dengan menggunakan kelas responsif.

Cara Mengesahkan Tarikh Bootstrap Cara Mengesahkan Tarikh Bootstrap Apr 07, 2025 pm 03:06 PM

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

See all articles