Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Jadi menyapa semua orang yang menonton di sini,
atau menonton secara online, atau jarak jauh.
Nama saya Neel, ini CS50.
Dan seminar hari ini adalah Responsif Web Desain dengan Bootstrap.
Ini topik yang sangat dekat dengan hati saya.
Mudah-mudahan, itu akan menjadi dekat di hati Anda
serta pada akhir seminar hari ini.
Jadi Bootstrap.
Berapa banyak dari Anda telah melakukan apapun jenis pengembangan web sebelumnya?
Sebuah jumlah yang baik?
Sedikit.
>> Jadi Bootstrap adalah dunia yang paling populer, kerangka front-end.
Ini digunakan by-- Aku telah memilih beberapa websites-- acak
Lyft, Newsweek, dan Vogue.
Ini digunakan oleh sejumlah situs.
Ini adalah kerangka desain web yang akan membiarkan Anda membuat website Anda
indah dan responsif.
Dan aku akan pergi ini dua konsep di sini.
Indah.
Jadi Anda memiliki situs web yang normal pada kiri, yang dibuat dengan hanya HTML.
Anda telah belajar HTML di kelas dan di bagian panjang lebar.
Bootstrap adalah cara untuk membuat website Anda yang indah.
Anda dapat mengambil apa yang ada di sisi kiri layar Anda
dan mengubahnya menjadi apa yang ada di sisi kanan layar Anda dengan sangat,
sangat, sangat sedikit kode.
>> Anda mendapatkan tombol biru bagus, Anda mendapatkan mewah itu, ujung bulat di layar,
Anda mendapatkan tampilan daftar, Anda mendapatkan kartu, dan seterusnya dengan sangat sedikit kode.
Ada sebenarnya tidak ada CSS yang Anda harus menulis sendiri.
Jadi Bootstrap memungkinkan Anda untuk memiliki ini CSS pre-built
Anda dapat menempatkan komponen dalam halaman web Anda
agar terlihat cantik tanpa sangat banyak bekerja pada Anda sendiri.
Ini benar-benar sebuah bootstrap, titik awal,
untuk petualangan pengembangan web Anda.
Dan jadi ketika Anda hanya mengejek sebuah situs web,
itu adalah tempat yang sangat baik untuk memulai.
Anda bisa mendapatkan sebuah website yang baik dengan sangat, pekerjaan yang sangat sedikit.
Dan memang, kita akan untuk melakukan hal ini sendiri
dalam perjalanan seperti lima minutes-- dalam waktu 10 menit.
Sehingga cukup mudah untuk membuat beberapa situs besar.
Jadi itulah bagian pertama.
>> Kedua part-- responsif.
Orang, saat ini, tidak hanya mengakses web pada laptop mereka.
Sebenarnya, pada 2014, lebih banyak orang mengakses web melalui perangkat mobile,
seperti telepon, atau tablet, atau layanan, atau sebagainya dari website.
Dan website secara tradisional dirancang dengan laptop atau desktop
dalam pikiran.
Dan situs yang sering tidak sangat cocok untuk ponsel Anda.
Jika Anda pernah mengunjungi harvard.edu pada ponsel Anda,
itu semacam menjengkelkan pengalaman, kan?
Itu karena itu tidak responsif.
Kami mencoba untuk membuat situs yang responsif,
yang merespon ukuran layar rakyat.
>> Jadi jika itu telepon, itu akan pergi di telepon.
Jika itu tablet, itu akan pergi pada tablet.
Ini menyesuaikan untuk mencocokkan layar yang sedang digunakan.
Dan Bootstrap juga menyediakan beberapa sangat, utilitas sangat berguna untuk itu.
Dan kita akan membahas itu juga.
Jadi sekali lagi, ada dua bagian untuk Bootstrap-- indah dan bertanggung jawab.
Kita akan berbicara tentang orang-orang.
Pertama, indah.
Dan kemudian responsif.
>> Jadi semua kode yang kami akan berbicara tentang today--
kita akan memiliki banyak contoh, banyak tantangan, dan on-- itu
semua tinggal di website ini di sini.
Slide ini adalah apa yang kita dikirim keluar.
Jadi jika Anda berada di sini, Anda bisa merasakan bebas untuk tidak perlu menulis yang turun.
Dan jika Anda menonton dari jarak jauh, merasa bebas untuk melakukan ini di komputer Anda
demikian juga.
Anda mungkin akan membutuhkannya selama jalannya seminar ini.
>> Jadi kita akan menggunakan situs web disebut CodePen,
yang merupakan coding kolaboratif lingkungan, selama seminar ini.
Dan CodePen-- dan aku akan menunjukkan di sini nyata fast--
memungkinkan Anda untuk menulis HTML secara kolaboratif.
Saya bisa menulis itu, saya dapat mengirim ke kalian, kalian bisa mengeditnya.
Bahkan jika Anda jauh, Anda masih dapat mengakses dengan cara itu.
Anda dapat mengetik kode HTML di atas dan itu akan secara otomatis
dikonversi ke dalam Halaman web di bagian bawah.
Jadi itu adalah cara bagi Anda untuk segera mencoba kode
tanpa harus melakukan apapun barang pada IDE Anda, atau website Anda sendiri,
atau apapun.
>> Jadi pergi ke depan dan menarik ini website, jika Anda terpencil
atau jika Anda berada di sini, terutama jika Anda terpencil.
is.gd/cs50boostrap.
Tidak ada topi, tidak ada garis bawah, tidak ada apa-apa.
Jadi bagi anda yang di sini, saya hanya memberikan jempol
ketika Anda telah ditarik up halaman web.
Baik?
>> AUDIENCE: Ya.
>> NEEL Mehta: Jadi kita akan mendapatkan itu hanya satu detik.
Jadi pertama, kita akan mendapatkan, bagaimana Anda membuat website Anda cantik?
Kita akan belajar bagaimana untuk mengambil membosankan, HTML tua, seperti saya menunjukkan Anda sebelumnya,
dan mengubah itu menjadi komponen yang benar-benar bagus,
seperti widget bagus, bagus, berwarna tombol, dan label, dan tabel,
dan semua, menggunakan Bootstrap.
Jadi jika kita bisa semua pergi ke CodePen yang baru saja Anda berhenti.
Seharusnya terlihat sedikit seperti ini.
Apakah terlihat seperti ini untuk semua orang?
>> AUDIENCE: Ya.
>> NEEL Mehta: Jika Anda jauh, itu akan terlihat seperti ini juga.
Jika tidak, saya akan menunjukkan bagaimana segera Anda bisa mendapatkannya terlihat seperti ini
di bagian depan dari video.
Jadi di sini kita telah menulis HTML sangat dasar,
seperti jenis yang Anda sudah telah menggunakan di kelas.
Hal ini cukup mendasar.
Tanpa embel-embel.
Dan kami memiliki beberapa hal.
Kami telah merancang sangat, sangat dasar start up
memanggil Yalp! dengan mana Anda dapat menemukan restoran di daerah,
dan menemukan ulasan, dan arah pada semua orang.
Ini adalah konsep yang sangat baik.
Ini pernah dilakukan sebelumnya.
Ini adalah nama yang sangat unik, juga.
>> Jadi apa yang kita akan mencoba lakukan adalah membantu pemilik
dari Yalp! membuat website-nya terlihat benar-benar, benar-benar keren.
Jadi untuk memulai dengan, pemilik Yalp! telah membuat pencarian sedikit
kotak, dan tombol kecil, dan kemudian mungkin sedikit
area yang disorot untuk restoran disorot, dan kemudian
daftar restoran lainnya yang berada di daerah.
Jadi kami hanya bisa melalui kode HTML sangat cepat.
Bagaimana nyaman adalah kalian dengan HTML?
Kami telah melakukan sedikit bagian dan juga di kelas.
Layak?
>> Jadi hanya sebagai rekap, HTML adalah semua tentang memiliki
tag atau elemen yang menceritakan komputer bagaimana lay out halaman web.
Jadi h1 ini di sini-mulai h1, Selamat untuk Yalp !, akhir h1-- memberitahu komputer,
menggambar header besar itu mengatakan, Selamat Datang Yalp!
dalam sana.
Kami juga memiliki bentuk.
Kami dapat masukan seperti ini, masukan teks, yang akan membuat kotak teks
Anda menulis di.
Anda juga memiliki tombol.
Anda mendapatkan yang bagus, tombol diklik.
Ia tidak melakukan sesuatu dengan benar sekarang, tetapi Anda mendapatkan sebuah tombol.
Anda dapat memiliki divs, atau pemisah, untuk memecah halaman Anda ke dalam berbagai kelompok.
>> Anda dapat memiliki paragraf, Anda memiliki tombol.
Jika Anda memiliki paragraf, maka Anda memiliki daftar unordered, ul,
dan daftar dalam itu, li.
Jadi ini adalah sangat dasar blok bangunan dari halaman web.
Dan memang, cukup banyak setiap website yang Anda lihat
akan dibangun menggunakan alat-alat yang sama.
Tentu saja, mereka tidak semua terlihat buruk ini karena kami
akan rempah-rempah itu sedikit.
Jadi mari kita ini HTML membosankan dan awal mengubahnya menjadi situs indah
bahwa kita hanya melihat beberapa menit yang lalu.
>> Jadi mari kita mulai sangat sederhana.
Jadi kita memiliki tombol ini di sini.
Dalam Bootstrap, seperti yang kita lihat, kita bisa memiliki,, tombol biru yang indah bagus.
Dan itu dilakukan tidak dengan melakukan CSS kustom.
Tidak ada CSS kustom di sini.
Itu dilakukan dengan menambahkan kelas untuk elemen HTML Anda.
Jika Anda sudah mencoba kelas, atau hrefs, atau jangkar, atau type = "text" untuk inputs--
Elemen HTML dapat memiliki atribut ini.
Mereka dapat memiliki informasi tambahan Anda mungkin memberi mereka.
>> Dan, dalam hal ini, Kelas adalah atribut.
Jadi, Anda akan menulis, kelas tombol = sesuatu di dalam string.
Dan atribut yang akan memberitahu komputer, ini tidak ada, tombol tua.
Ini adalah tombol yang ada di kelas ini tombol.
Dan Bootstrap, jika Anda memberikan gaya tertentu pada elemen Anda,
akan menarik dengan cara tertentu.
Jadi saya menulis "btn btn-primer.
btn menjadi singkatan untuk tombol.
Anda akan melihat sekarang bahwa tombol jelek saya berubah
menjadi,, tombol biru yang indah bagus.
Hal ini terlihat sangat bagus ketika kita klik itu.
>> Dan apa yang terjadi adalah kita memiliki kelas btn dan kelas btn-primer
pada elemen kami.
Dan Bootstrap akan masuk dan berkata, OK, saya tahu bahwa ada dua kelas tersebut.
Setiap elemen yang memiliki dua ini Kelas harus ditarik seperti ini.
Jadi itulah inti dari bagaimana Anda melampirkan gaya untuk elemen dalam Bootstrap.
Anda tinggal memasang kelas untuk mereka dan itu akan berat itu seperti melihat cocok.
Jadi, inilah contoh lain.
Pada input, kita dapat menambahkan kelas = "bentuk-control".
Dan aku akan menunjukkan segera di mana Anda dapat mengetahui apa kelas
tersedia dari setiap jenis elemen.
Tapi kelas yang baru saja kita tambah memiliki bagus, sudut dibulatkan,
memiliki bagus padding, memiliki bagus, cahaya biru untuk itu.
>> Kita juga bisa masuk ke formulir ini.
Dan class = "bentuk-inline", yang akan membuat formulir kami, seperti yang Anda bayangkan, inline.
Jadi itu tampak sedikit lebih seperti apa yang kita miliki sebelumnya sudah.
Jadi sebelum kita pergi untuk gaya sisa halaman, pertanyaan tentang apa yang kita
melakukan?
Kami hanya melekat kelas untuk berbagai elemen kami.
Dan saya tunjukkan nanti bagaimana Anda dapat mencari tahu apa kelas yang tersedia.
Kami melekat kelas yang memiliki gaya tertentu.
Dan yang memberitahu browser bagaimana tata letak halaman menggunakan
Tersedia gaya bootstrap ini.
Pertanyaan dari penonton?
>> Baik sejauh ini?
Keren.
Banyak tantangan dengan Bootstrap hanya
mengetahui apa komponen tersedia dan bagaimana Anda menggunakannya.
Dan yang semua belajar dengan pengalaman dan juga
melalui membaca dokumentasi, yang akan kita bicarakan segera.
Jadi kita memiliki div ini.
Itu hanya membosankan, hal lama.
Kami ingin menekankan entah bagaimana.
Jadi di Bootstrap, ada banyak komponen yang tersedia.
Dan ini getbootstrap.com.
Ini adalah referensi yang sangat berguna.
Ini berisi hal-hal like-- sini adalah bagaimana Anda melakukan sebuah tombol.
Dan Anda dapat melakukan nav bar, Anda bisa label, Anda dapat maju bar,
Anda dapat melakukan kelompok daftar.
Pada dasarnya, itu semua jenis Anda mungkin melihat halaman web.
>> Berikut ini salah satu yang akan kita coba sekarang.
Ini disebut panel.
Jika Anda pernah menggunakan Google Sekarang, mereka memiliki kartu.
Atau perangkat Android memiliki kartu.
Mereka memiliki kotak putih kecil yang memiliki barang-barang di dalamnya.
Dan jadi kami akan mencoba dan melakukan bahwa diri kita di sini menggunakan hal
disebut panel.
Jadi jika kami lampirkan class = "panel Panel-default "untuk div luar kita,
maka kita melampirkan div class = - mari hanya memeriksa dokumentasi ini.
div class = "panel-pos" dan kemudian div class = "panel-tubuh".
Sekali lagi, jangan khawatir tentang menghafal kode ini.
Ini akan tersedia secara online.
>> Jadi kami melakukan ini dan sekarang membosankan kami, lama div berubah menjadi baik, sedikit kartu ini.
Memiliki bagus padding, itu memiliki batas, itu menonjol
dari sisa halaman, yang cukup keren.
Jadi mari kita masuk dan mengubah ini Dapatkan tombol arah untuk terlihat bagus.
Yang penonton ingin memberitahu saya apa yang saya bisa lakukan untuk tombol
untuk membuatnya terlihat bagus menggunakan Bootstrap?
Iya nih?
>> AUDIENCE: Kita bisa menambahkan kelas.
Dan kita bisa melakukan class = "btn btn-utama".
NEEL Mehta: Ya.
Ada sekelompok lainnya warna yang tersedia untuk buttons--
atau untuk apa pun, dalam hal ini.
Kita bisa melakukan btn-bahaya dan membuatnya merah.
Di sana kami pergi.
Kita bisa melakukan btn-sukses untuk membuatnya hijau.
Kita bisa melakukan btn-info-- ada a bunch dari hal-hal yang tersedia untuk Anda.
Jadi saya memiliki sedikit tantangan bagi Anda sekarang.
Jadi ada satu hal lagi bahwa saya telah meninggalkan un-gaya.
Ini Restoran Top.
>> Dan kita ingin menggunakan hal disebut kelompok daftar untuk gaya itu.
Jadi tantangan saya kepada Anda adalah pergi ke getbootstrap.com--
Aku akan menariknya di sini.
getboostrap.com.
Pergi ke getbootstrap.com, menemukan bagian di mana mereka pergi lebih kelompok daftar.
Dan Anda akan melihat di sini sebuah contoh dan kelas yang tepat
yang dapat Anda gunakan untuk membuat Anda daftar ke dalam kelompok daftar bagus.
Ini bekerja contoh contoh kode, apa
kode yang Anda gunakan, apa kode HTML Anda gunakan, dan apa yang output.
>> Jadi tantangan saya untuk you-- pergi getbootstrap.com,
apakah Anda berada di sini atau di rumah, dan untuk mencoba dan menambah gaya untuk ul ini
untuk membuatnya terlihat bagus.
Dan menggunakan gaya kelompok daftar.
Anda ingin mengambil beberapa menit, dan mencari dokumentasi,
coba sendiri ini?
Karena ketika Anda sedang melakukan pengembangan web, Anda akan menyadari banyak pekerjaan Anda
akan membaca dokumentasi ini.
Jadi saya pikir itu baik untuk mendapatkan akrab dengan cara membaca dokumentasi,
bagaimana untuk mencari tahu apa yang mana, apa kode contoh Anda dapat menggunakan,
apa yang dapat Anda memanfaatkan.
>> Jadi sekali lagi, getbootstrap.com, pergi ke tab Komponen,
dan kemudian gulir ke bawah ke Daftar Group.
Dan Anda akan melihat contoh kode yang Anda dapat menggunakan untuk membuat HTML Anda cocok itu.
Jadi mengambil beberapa menit dan mencoba dan mengeksplorasi sendiri,
apakah Anda berada di sini atau di rumah.
Jika Anda berada di rumah, menghentikan video sementara, mungkin, dan mencobanya sendiri.
Jika Anda berada di sini, jika Anda pergi ke kami website-- jika Anda me-refresh halaman,
Anda akan melihat ini di sana.
Kode yang sama ini hanya menambahkan gaya baru di sana.
Jadi mengambil beberapa menit.
Biar saya tahu ketika Anda merasa baik tentang hal itu atau ketika Anda benar-benar hilang.
Kedengarannya bagus?
Keren.
Cepat samping bagi anda di rumah, sementara kita sedang menunggu,
jika Anda pergi ke situs GitHub bahwa saya memasang beberapa slide yang lalu,
menuju awal video, Saya memiliki repo GitHub, repositori,
untuk bicara ini.
Semua contoh kode ini bahwa kami akan berbicara tentang disimpan di sini.
Jadi jika Anda pergi untuk menantang-1.html, ini adalah semua kode yang kita miliki sekarang
di CodePen kami.
Jadi Anda hanya bisa pergi ke depan, dan menyalin ini, dan paste di CodePen Anda sendiri.
Dan dengan cara itu, Anda bisa mengikuti dengan apa yang kita lakukan di sini.
Jadi memiliki halaman ini terbuka serta kami melalui sisa seminar.
Sekali lagi, Anda ingin terlihat seperti apa yang Anda melihat ke bawah di bagian bawah layar Anda
sana.
Merasa baik?
Padat.
Mari kita tunggu orang lain untuk selesaikan dengan apa yang mereka lakukan.
>> Iya nih?
>> AUDIENCE: Misalkan saya ingin menggunakan Bootstrap di home--
NEEL Mehta: Ya.
AUDIENCE: Saya melihat, di website, Memulai halaman.
Mereka memberi saya pilihan Bootstrap, Source Code, atau Sass.
Yang ini yang saya inginkan?
>> NEEL Mehta: Ya.
Jadi pertanyaannya adalah, bagaimana Anda mendapatkan mulai menggunakan Bootstrap oleh diri kita sendiri?
Ini hanya terjadi untuk ajaib bekerja di sini.
Jadi jika kita memiliki waktu di akhir seminar,
Saya akan menunjukkan bagaimana Anda dapat mendapatkannya pada halaman web Anda sendiri.
Seperti di sini, saya sudah benar-benar dimasukkan ke dalam beberapa pengaturan yang
akan memilikinya secara otomatis dimuat, tapi aku akan
menunjukkan Anda untuk melakukannya dari menggaruk pada halaman web Anda sendiri.
>> AUDIENCE: Terima kasih.
>> NEEL Mehta: Ya.
Pertanyaan bagus.
Merasa baik?
Merasa baik?
Keren.
Jadi yang ingin memberitahu saya bagaimana mereka membuat Hal ini terlihat bagus dan Boostrappy?
Apa kelas pertama kami menambah ul itu?
AUDIENCE: class = "daftar-kelompok".
NEEL Mehta: Ya. daftar-kelompok.
Dan kemudian apa yang kami lampirkan untuk lis itu?
Orang lain?
AUDIENCE: Dan kemudian, setelah itu, class = "list-kelompok-item".
>> NEEL Mehta: Ya.
>> AUDIENCE: Dan itu adalah sama untuk yang berikutnya.
>> NEEL Mehta: li class = "list-kelompok-item".
Ini dia.
Kami memiliki kami kelompok daftar bagus, seperti yang kami harapkan.
Jadi di sana Anda pergi.
Dalam 10 menit, kami telah membuat membosankan ini, Yalp tua! halaman
terlihat bagus dan profesional.
Dan itu hanya awal.
Jadi sekarang bahwa Anda merasa baik tentang itu, mari kita
hanya pergi ke depan dan berbicara tentang beberapa komponen yang lebih
mungkin akan berguna saat Anda pergi seluruh petualangan Anda.
>> Tentu saja, ada banyak orang di sini.
Dan sekarang bahwa Anda telah belajar bagaimana melakukan kelompok daftar,
Anda dapat cukup banyak mengajar sendiri bagaimana melakukan semua ini.
Tapi, tentu saja, mari kita coba dan melakukan beberapa lebih diri kita sendiri,
hanya sehingga Anda mendapatkan merasakan bagaimana Anda dapat menggunakannya.
Aku hanya akan pergi untuk contoh ini di sini.
Sekali lagi, kode yang saya hanya disisipkan di sini tersedia di sini.
Jadi jangan ragu untuk menariknya ke atas.
>> Jadi kita sudah melewati beberapa contoh.
Jadi kita memiliki tombol, yang kita telah melihat bagaimana melakukannya.
Kita bisa membuat tombol yang lebih besar.
Dengan tombol class-- kelanjutannya, btn btn-lg dan btn-default membuatnya putih.
Jadi ini membuat tombol kita lebih besar daripada yang mungkin sebaliknya menjadi.
Ini mungkin akan berguna, jika Anda memiliki tombol atau sesuatu yang besar kirimkan.
Kami melihat contoh kelompok daftar, kita melihat contoh form.
>> Satu yang sangat penting adalah ikon.
Dan ikon adalah cara bagi Anda untuk menambahkan hal-hal menarik, seperti cek cek
tanda, atau plus, atau teman ikon, atau ikon restart,
atau apa pun untuk aplikasi web Anda.
Jadi sekali lagi, jika kita ke sini, komponen, glyphicons,
adalah ikon yang tersedia untuk Bootstrap.
Ada lengkap daftar semua yang di sini.
Jadi hanya sebagai contoh, mari kita coba dan menambahkan satu.
>> Jadi seperti Facebook, kami mencoba untuk memiliki tombol Add Friend.
Mari kita pertama menambahkan beberapa gaya.
class = tombol "btn btn-sukses".
Dan di sana kita pergi.
Mari menambahkan ikon di sini.
Apa ikon, menurut Anda, mungkin masuk akal untuk menempatkan di sini?
Anda mungkin pernah melihat di beberapa halaman web atau apa pun,
tapi apa contoh ikon yang mungkin pergi baik di dalam tombol ini?
Jangan ragu untuk menelusuri pandangan ini, jika Anda membutuhkan inspirasi apapun.
Ada banyak berguna yang tersedia di sini.
Iya nih?
>> AUDIENCE: Mungkin satu glyphicon pengguna?
NEEL Mehta: OK.
Yang ini.
Itu cukup bagus.
Iya nih.
Di Facebook, saya pikir itu akan terlihat sedikit seperti itu.
Jadi, inilah bagaimana kita pergi tentang menambahkan ikon ke halaman kami.
Kami hanya memiliki rentang span-- adalah suatu wadah netral untuk sesuatu.
Sebuah div adalah wadah untuk sesuatu, rentang adalah wadah lain.
divs memiliki jeda baris sekitar mereka, bentang tidak.
Jadi ada berbagai cara memiliki wadah generik.
Seperti itu tidak masuk akal untuk menempatkan dalam sebuah paragraf atau apa pun.
Kita harus meletakkannya dalam sesuatu meskipun,
jadi kami hanya menempatkan dalam span.
Jadi span class = glyphicon glyphicon-user "rentang dekat.
Dan kami sekarang memiliki ikon dalam tombol.
>> Sehingga tidak terlihat sepenuhnya berbeda apa yang mungkin Anda lihat di facebook.com.
Dan itu bagus bahwa bisa sebenarnya ditempatkan di manapun Anda inginkan.
Di bar header, dalam kelompok daftar Anda.
Apapun.
Tidak harus dalam sebuah tombol.
Jadi sebagai contoh, saya bisa menempatkan kelas yang sama di sini.
"glyphicon glyphicon-user".
Dan tampaknya sama.
Jadi ini icons-- Anda dapat menggunakan rentang class = "glyphicon glyphicon-apa".
Dan yang akan membiarkan Anda menambahkan ikon mana pun Anda inginkan.
Dan ikon yang sangat penting bagian dari membuat tampilan website
profesional dan dilakukan dengan baik.
Jadi jangan berlebihan, tapi itu sering hal yang baik untuk tahu.
>> Panel, lagi.
Saya hanya akan melakukan ini lagi sebagai rekap karena mereka jenis yang terlibat.
Anda akan melihat bahwa di mengubah HTML normal Anda
situs menjadi Bootstrap-afied situs, Anda akan memiliki
untuk menambah struktur tambahan ke situs web.
Misalnya, kita memiliki ekstra divs sini hanya karena mereka
diperlukan untuk membuat panel.
Jadi hanya ingat-ingat bahwa Anda harus memiliki struktur tambahan.
Jadi "panel panel-default".
Mungkin panel-header.
Saya pikir itu panel-pos.
Iya nih.
Di sana kami pergi.
Jadi, sekali lagi, ada panel kami.
>> Satu hal lagi yang kita tidak menutupi lagi, tabel.
Tabel, secara default tampilan jenis jelek.
Seperti ini.
Tapi meja, tentu saja, bagian yang sangat penting
dari apa yang akan Anda lakukan dalam pengembangan web.
Dalam Pset7, misalnya, CS50 Keuangan, yang akan segera keluar,
Anda akan menggunakan banyak tabel.
Dan banyak web dev menggunakan banyak tabel untuk menampilkan informasi,
seperti saham, atau skor, atau apa pun.
>> Jadi styling tabel sebenarnya sangat mudah.
Anda menambahkan kelas meja ke meja Anda.
Dan, saya berani mengatakan, itu terlihat cukup bagus.
Anda dapat melakukan hal-hal ekstra, seperti "meja meja bergaris".
Dan Anda akan melihat hasilnya di sini.
Anda dapat melakukan meja-berbatasan.
Ada banyak pilihan yang Anda bisa.
Tapi pada dasarnya, menambahkan meja, kelas meja,
akan membuat tabel Anda terlihat cukup bagus.
Jadi itulah ikhtisar singkat dari beberapa gaya yang lebih penting
dan komponen Anda akan perlu menggunakan untuk Bootstrap.
Jadi saya berpikir bahwa membungkus up bagian kita yang indah.
Pertanyaan sekarang tentang bagaimana untuk membuat website Anda cantik?
Bagaimana Anda bisa menggunakan ini komponen untuk keuntungan Anda?
Merasa baik?
Iya nih?
AUDIENCE: Mungkin ini adalah pertanyaan konyol,
tapi dapat Anda gunakan Bootstrap di Wikipedia?
Jika Anda mengedit halaman Wikipedia?
NEEL Mehta: Ya.
Jadi pertanyaannya adalah, aku mengedit halaman Wikipedia,
bisa saya termasuk Bootstrap gaya di sana?
>> AUDIENCE: Ya.
>> NEEL Mehta: Dan Bootstrap adalah pada dasarnya sebuah style sheet CSS besar.
Sebuah style sheet CSS hanya mengatakan, setiap kali Aku punya kelas ini, melampirkan gaya ini.
Jadi style sheet CSS untuk Bootstrap akan menjadi sesuatu seperti .btn,
kelas tombol, akan mendapatkan seperti sudut perbatasan bulat atau apa pun.
Jadi pada dasarnya, Bootstrap itu hanya sekelompok kelas dan sekelompok gaya
ditentukan untuk kelas-kelas.
Jadi selama Anda memiliki CSS itu, daftar ini aturan di halaman Anda,
Anda akan mendapatkan styling Bootstrap.
Artinya, tentu saja, bergantung pada memiliki gaya Bootstrap di halaman Anda
memulai dengan.
>> Dan di Wikipedia, Anda mungkin tidak bisa
melakukan itu karena Wikipedia tidak memiliki Bootstrap di dalamnya.
Tapi jika itu memang memiliki Bootstrap, Anda mungkin bisa melakukan itu.
Dan jika Anda ingin, Anda bisa termasuk, tapi itu mungkin
mematahkan tata letak yang ada dari halaman.
Tapi pertanyaan yang sangat baik.
Anda dapat menggunakan Bootstrap di mana pun disertakan,
tapi itu tidak dibangun dalam secara default.
>> AUDIENCE: Terima kasih.
>> NEEL Mehta: Ya.
Ada pertanyaan lagi?
Iya nih.
Jadi apakah Anda berada di sini atau di rumah, hanya ingat getboostrap.com-- lagi,
getboostrap.com-- adalah teman Anda.
Setiap kali Anda menggunakan Bootstrap, ini akan memberikan Anda
instruksi tentang bagaimana untuk mendapatkan mulai, bagaimana menggunakan komponen.
Ada beberapa keren JavaScript plug-in yang kita tidak akan pergi di sini,
tapi mereka senilai check-out juga.
Jadi ini adalah teman Anda.
Itu hanya penting untuk mendapatkan digunakan untuk bagaimana menggunakan ini.
>> Jadi mari kita ngobrol sedikit tentang membuat website responsif.
Jadi seperti yang saya katakan sebelumnya, orang-orang yang digunakan laptop mereka, mereka menggunakan ponsel mereka.
Dan seperti yang Anda bayangkan juga, ini adalah ukuran layar yang sangat berbeda dari itu.
Dan website yang sama yang terlihat baik pada ponsel saya
tidak akan terlihat bagus, tentu, pada komputer.
Jadi apa yang harus Anda lakukan adalah membuat website Anda beradaptasi.
Hal ini untuk beradaptasi dengan berbagai ukuran layar yang ada di.
>> Hal ini untuk mengatakan, aku tahu aku pada komputer, laptop besar, saya harus memperluas.
Aku tahu aku di telepon, saya harus menyusut.
Dan Bootstrap menyediakan beberapa sangat, alat yang sangat berguna untuk melakukan hal ini.
Jadi Bootstrap mari Anda istirahat website menjadi 12 kolom.
Anda dapat membuat baris dan memiliki 12 kolom.
Dan Anda dapat melakukan partisi mereka namun Anda inginkan.
Anda dapat memiliki satu, hal yang besar, yang merupakan 12 kolom lebar.
Anda dapat memiliki dua hal yang enam masing-masing.
Anda dapat melakukan satu hal yang empat, satu yang dua, atau satu yang enam.
Anda dapat melakukan tiga, tiga, tiga, tiga.
Anda dapat melakukan apapun breakdown yang Anda inginkan.
>> Jadi mungkin halaman web Anda harus memiliki kolom kiri itu sepertiga lebar.
Sehingga akan menjadi empat kolom lebar dan sisa halaman
akan delapan kolom lebar.
Jadi ini adalah contoh.
Mari kita tarik contoh lain.
>> AUDIENCE: Apakah itu selalu harus bahkan perpecahan?
Mungkinkah tujuh, lima split?
>> NEEL Mehta: Ya.
Ini bisa menjadi tujuh, lima.
Iya nih.
Selama itu menambah 12, itu baik-baik saja.
Jadi mari kita kembali ke sini.
Sekali lagi, kode yang disini juga tersedia di sini,
di bawah contoh responsif.
Jadi aku hanya berhenti beberapa contoh kode responsif sini.
Jadi Anda melakukan ini dengan menggunakan hal yang disebut baris.
Row hanya kelas lain.
Ini gaya yang lain Anda menambahkan ke Anda divs untuk membuat mereka komponen sendiri.
>> Jadi Anda mengatakan, div class = "row" untuk membuat baris,
untuk memberikan diri Anda 12 kolom ruang.
Dan kemudian Anda menempatkan kolom dalam itu.
Jadi di sini kita col-xs-6.
Jangan khawatir tentang xs.
Kita akan berbicara tentang dalam detik.
Tapi pada dasarnya, kita memiliki satu hal yang enam lebar.
Kami menyebutnya kiri.
Dan jadi itu kotak kiri di sini.
Kami memiliki satu hal yang enam dari 12 kolom lebar.
Dan salah satu yang ada di sebelah kanan.
>> juga hanya memberikan merek div Anda mengisinya abu-abu.
Jadi itu hanya jadi kita bisa melihat bahwa mereka berbeda.
Dan jadi ini contoh pertama.
Ini adalah contoh yang sangat sederhana bagaimana Anda akan menggunakan baris dan kolom sini.
Anda mendefinisikan berturut-turut class = "row".
Dan kemudian Anda lakukan class = "col-xs-6" melakukan setengah, "col-xs-6" untuk melakukan setengah lainnya.
Berikut adalah contoh yang lebih rumit.
Mari kita lihat Tiny, Besar, Sisa satu.
>> Kita bisa membuat kecil dua kolom lebar, kita dapat membuat besar enam kolom lebar,
dan Sisa empat kolom lebar.
Yang menambahkan sampai 12.
Dan ini berakhir mencakup lebar halaman.
Sekali lagi, kami memiliki berturut-turut luar.
Kemudian kita memiliki div class = "col-xs-2" dan kemudian 6, dan kemudian 4.
Dan yang akan memberikan struktur bagi kita.
Dan sehingga kita bisa meletakkan apa pun sih kita inginkan dalam sini.
Alih-alih kecil, kita dapat menempatkan sebuah tombol.
class = tombol "btn btn-utama".
Dan perhatikan bahwa tombol kami tidak mengambil semua lebar,
tapi setidaknya itu dibatasi untuk banyak ruang.
>> Jadi itu semua baik dan bagus.
Jadi sekarang kita bisa memecah web kami Halaman ke dalam potongan, lebar bijaksana.
Kita dapat mengatakan kita ingin memiliki kiri kolom, dan kolom kanan, dan sebagainya.
Tapi kami tidak pergi lebih bagaimana Anda membuatnya responsif.
Dan Bootstrap mari kita melakukannya juga.
Ini memiliki hal-hal ini disebut breakpoints.
Sehingga memiliki cara untuk mengetahui apakah Anda berada di laptop, Anda berada di tablet,
Anda berada di horisontal telepon, atau Anda pada ponsel vertikal.
Ia tahu ukuran layar.
Dan istirahat ini menjadi empat categories-- besar atau lg, yang laptop, biasanya.
md atau media, yang merupakan tablet.
sm, kecil.
Atau xs, ekstra kecil.
Dan ketika Anda menentukan kolom, Anda mengatakan,
itu harus enam kolom lebar pada perangkat ekstra kecil.
Itu sebabnya kami melakukan col-xs-6.
Kami mengatakan bahwa seharusnya menjadi enam dari 12 kolom lebar
pada perangkat ekstra kecil.
Dan jika itu sesuatu yang lebih besar, kami hanya akan default untuk menggunakan ukuran kecil ekstra.
Jika itu sesuatu yang lebih besar daripada ekstra kecil, itu akan menjadi enam macam.
Dan jadi kita dapat memanfaatkan ini untuk membuat kolom kami
mengambil jumlah yang berbeda dari kolom berdasarkan ukuran layar.
Mari kita pergi ke Resize responsif ini.
Jadi kita memiliki kolom kita.
Dan mengatakan, "col-lg-6 col-xs-12".
Jadi diberikan apa yang Anda tahu sejauh ini, apa yang Anda
berpikir akan terjadi pada layar besar?
Nah, itu jenis memberikan jalan, tapi apa yang
Anda pikir itu akan terlihat seperti pada layar besar?
Dan kenapa begitu?
>> AUDIENCE: Apakah itu pada layar besar, itu
akan mengambil hanya bagian dari ruang penuh?
Seperti setengah dari itu, saya kira?
>> NEEL Mehta: Ya.
>> AUDIENCE: Dan pada yang lebih kecil layar, itu akan
untuk mengambil seluruh layar, 12.
NEEL Mehta: Ya.
Kanan.
Jadi sebagai contoh, mari kita hanya melihat di sini.
Iya nih.
Jadi pada apa pun yang lg atau bigger-- sehingga komputer saya terjadi
untuk lg karena itu cukup wide-- itu akan membuat
itu berdampingan karena col-lg-6.
Jadi karena itu pada besar, itu membuat enam kolom lebar dan enam kolom lebar.
Mari kita lihat apa yang terjadi jika saya membuat ini menjadi salah satu yang lebih kecil.
Aku hanya akan layar un-penuh ini.
Dan aku akan mengecilkan layar.
Aku akan mengecilkan layar, sehingga Sepertinya saya pada perangkat yang lebih kecil.
Jadi aku akan menyusut seperti ini.
>> Dan voila.
Sekarang ditumpuk karena sekarang kita sudah
dari to-- besar ini mungkin ukuran layar kecil ekstra.
Dan jadi sekarang ia mengatakan, OK, kita tidak dalam jumlah besar, kami berada di tanah ekstra kecil.
Jadi kita akan menggunakan ukuran kecil ekstra.
Dan kita akan xs-12, xs-12.
Jadi itu akan ditumpuk.
Dan hanya melihat bahwa ada Hal yang disebut breakpoint.
Sebuah breakpoint adalah di mana Anda membuat transisi
dari ekstra kecil untuk kecil, kecil ke besar, dan sebagainya.
>> Jadi hanya melihat bahwa seperti yang saya geser ini keluar, akhirnya, Anda akan sampai ke titik
di mana mereka akan melompat menjadi berdampingan.
Ini dia.
Jadi ada breakpoint di sana.
Jadi kita bisa membuatnya lebih rumit.
Sekarang kita bisa mengatakan, ini hal harus empat macam.
Artinya, mereka harus mengambil sekitar sepertiga
pidato pada perangkat yang sangat besar.
Pada perangkat media, harus mengambil setengah layar karena itu md-6.
Pada perangkat yang sangat kecil, itu harus mengambil 12.
Dan jadi ini terlihat cukup alami.
Mari kita coba ini untuk diri kita sendiri.
>> Jadi pada layar besar, mereka empat macam.
Menyusut sedikit.
Dan mereka sekarang enam lebar.
Jadi ini adalah enam, enam, enam.
Menyusut bahkan lebih dan kemudian mereka akan benar-benar ditumpuk.
Jadi ini, misalnya, masuk akal jika Anda memiliki kartu, seperti kartu berita,
misalnya, di mana jika itu pada layar yang sangat besar,
itu OK jika Anda memiliki beberapa berdampingan karena mereka semua akan mendapatkan cukup ruang.
Tapi mereka harus memiliki cukup ruang.
Jadi pada layar yang lebih kecil, Anda ingin memberi mereka
lebih banyak ruang, proporsional, halaman.
>> Jadi sebagai contoh dunia nyata, katakanlah kita memiliki Twitter.
Dan kami memiliki kotak teks, sehingga Anda dapat tweet di samping.
Dan kami memiliki daftar trending topik di sisi kanan.
Jadi pada layar besar, kita harus telah mereka menjadi berdampingan,
sehingga Anda dapat melihat mereka di gelas.
Tetapi pada layar yang lebih kecil, kita harus melakukan 12 dan 12,
sehingga topik trending berada di bawah area Tweet.
Karena daerah Tweet adalah Hal utama dan pada layar kecil,
topik tren tidak peduli cukup banyak.
Dan jadi kami menempatkan mereka tepat di bawah, sehingga bahwa mereka berdua bisa mendapatkan cukup ruang.
Masuk akal sejauh ini?
>> AUDIENCE: Ya.
>> NEEL Mehta: Solid.
Jadi itu semua contoh yang saya miliki di sini.
Mari kita mencoba dan melakukan tantangan.
Jadi sekali lagi, ini adalah tantangan-2.html untuk Bagi Anda mengikuti bersama di rumah.
Jadi teman saya, Mark Zuckerberg, datang kepada saya hari lain.
Dan dia seperti, Neel, saya harus mendapat cukup baik pada desain web.
Aku bisa melakukan HTML.
Saya telah membuat ini sedikit, mengedit baru untuk Facebook.
Saya memiliki ide baru untuk bagaimana kita harus gaya Facebook.
Dan ini dia.
Disini.
Berikut beberapa contoh kode.
Jadi itu disebut Fancybook.
>> Kami memiliki beberapa update status.
Kami memiliki Nemo, Mike Kosowski, ***-- tiga update status.
Dan kemudian kita memiliki daftar teman online tepat di bawah ini.
Jadi dia melakukan pekerjaan rumahnya.
Dia tahu sedikit tentang Bootstrap, dia membuat tampilan daftar,
ia telah melakukan sedikit HTML.
Jadi dia memiliki halaman web.
Tapi dia seperti, Neel, saya tidak memahami desain responsif sama sekali.
Apakah Anda memiliki ahli yang bisa membantu saya dengan itu?
Dan untungnya, Anda sekarang ahli dalam desain responsif.
>> Jadi apa yang dia mengatakan kepada saya bahwa ia adalah ingin Fancybook terlihat seperti ini.
Pada perangkat yang sangat kecil, seperti telepon, semuanya
harus ditumpuk, seperti di sini.
Jadi Anda memiliki timeline dimuka, di bagian atas, dan kemudian
Anda harus memiliki chatting bar di bagian bawah.
Tapi pada tablet atau media perangkat, itu harus setengah dan setengah,
seperti dalam timeline harus setengah dan daftar teman chatting
harus pada setengah lainnya.
>> Kemudian pada laptop, timeline harus mengambil tiga perempat
dan kemudian chat lindung nilai harus mengambil kuartal satu lagi.
Dan dia seperti, Neel, saya punya ini kode di sini, tapi tidak responsif.
Perlu bersikap seperti ini.
Jadi tantangan saya untuk Anda diberikan kode ini di sini-
jika Anda menyegarkan Anda CodePens, Anda akan melihat ini.
Atau jika Anda hanya sisipkan dalam kode tantangan-2, Anda akan melihat ini.
>> Berikut contoh kode ini.
Anda akan melihat beberapa xxxs.
Saya ingin Anda untuk mengubah xxxs, sehingga timeline dan daftar teman
berikut spesifikasi ini di sini.
Jangan khawatir tentang apa yang dalam timeline untuk saat ini.
Kita akan mendapatkan bahwa pada langkah berikutnya.
Tapi untuk saat ini, mari kita lihat apakah kita mendapatkan hal ini untuk berpisah itu seperti ini.
Jadi apakah itu masuk akal?
Jadi jika Anda berada di rumah, pause video dan mencoba
untuk membuat halaman web Anda terlihat responsif seperti ini.
Jika Anda berada di sini, mengambil seperti dua, tiga menit.
Jangan ragu untuk chatting dengan tetangga, dan mencoba, dan memperbaiki Mr Zuckerberg
masalah desain responsif.
Jika Anda memiliki pertanyaan, merasa bebas untuk membiarkan saya tahu.
Merasa baik?
Selesai?
Bagus.
>> AUDIENCE: [tidak terdengar].
NEEL Mehta: Apa?
>> AUDIENCE: Aku baik.
>> NEEL Mehta: Oh, bagus.
Bagus.
AUDIENCE: Hal tentang 12, itu Bootstrap yang
memperlakukan ruang layar yang diberikan sebagai 12 unit menemukan dan kemudian membagi itu?
Bagaimana tepatnya apakah proporsi bekerja untuk ini?
>> NEEL Mehta: Ya.
Jadi pertanyaannya adalah, bagaimana melakukan proporsi yang
bekerja untuk Bootstrap, kan?
>> AUDIENCE: Ya.
NEEL Mehta: Jadi, setiap kali Anda memiliki div class = "row",
tidak peduli seberapa besar layar, Bootstrap akan memberikan 12 unit
dengan ukuran yang sama untuk memakan banyak ukuran.
Jadi dalam col 1, itu selalu 8,33% dari ukuran layar,
apakah itu ini macam atau yang ini luas.
Dan, tentu saja, pada yang lebih kecil layar, setiap kolom lebih kecil.
Anda masih memiliki 12 kolom lebar, itu lebih kecil.
Jadi terserah Anda untuk memastikan bahwa hal-hal mengambil kolom lebih,
proporsional, untuk mengimbangi untuk itu kurangnya ruang.
Apakah itu masuk akal?
>> AUDIENCE: Ya.
Terima kasih.
NEEL Mehta: Pertanyaan yang bagus.
AUDIENCE: Pada besar layar, Anda dapat memiliki
timeline mengambil tiga perempat?
>> NEEL Mehta: Ya.
NEEL Mehta: Bagaimana orang merasa?
Baik?
Keren.
Jadi mari kita kembali.
Dan mari kita mencoba dan memperbaiki bagian ini dari situs Mr Zuckerberg.
Jadi jadwal adalah di sini, di atas, dan daftar teman
adalah di bagian bawah.
Dan jadi kita hanya perlu menetapkan kolom, dengan ukuran proporsional,
di masing-masing.
Jadi *** pertama ini adalah untuk timeline.
Kelas apa yang kita masukkan ke dalam sini?
Apa yang kalian dimasukkan ke dalam sini?
Jadi ingat, pada layar besar, perlu untuk mengambil tiga perempat dari lebar.
Dan jadi apa gaya akan memberikan Anda itu?
Pada layar besar, tiga perempat dari lebar.
Apa kelas kita menggunakan sana?
AUDIENCE: Jadi kita hanya akan menjadi mengedit bahwa contoh pertama dari kelas.
NEEL Mehta: Untuk saat ini.
Iya nih.
>> AUDIENCE: Kami tidak mengedit masing-masing, Fitur individu timeline?
NEEL Mehta: Tidak sekarang, setidaknya.
Jadi semua ini adalah blok.
Kami hanya mengubah perancangan blok.
Jadi di sini kita col-lg-9 karena itu sembilan dari 12 lebar pada layar besar.
Dan kemudian di layar media, berapa banyak kolom saya harus mendapatkan?
AUDIENCE: Ini seharusnya menjadi setengah dan setengah.
NEEL Mehta: Benar.
Jadi berapa banyak itu?
>> AUDIENCE: Jadi enam.
NEEL Mehta: Enam.
Dan kemudian ekstra kecil harus be-- jika mengambil seluruh lebar baris,
berapa banyak harus itu?
AUDIENCE: 12.
NEEL Mehta: 12.
Iya nih.
Dan sekarang kita harus mengubah ini yang lain,
sehingga tidak memakan sisa ruang.
Jadi col-lg--
AUDIENCE: Ini akan mengambil seluruh layar?
NEEL Mehta: Dibutuhkan seperempat dari layar pada perangkat yang besar,
seperti yang kita menunjukkan di sini.
>> AUDIENCE: Tiga.
>> NEEL Mehta: Tiga.
Dan kemudian col-md-6 untuk mengambil up sisa ruang.
col-xs-12.
Jadi sekarang kita memiliki timeline mengambil tiga perempat
dari halaman di layar lebar dan kemudian seperempat di samping.
Dan kemudian jika ukuran layar ke bawah, harus mengubah ukuran sesuai.
Jadi itu ditumpuk sekarang, pada layar yang sangat kecil.
Dan jika kita ukuran itu sedikit, mereka harus persis setengah setengah.
Jadi kami telah melakukan itu sejauh ini.
Sangat keren.
Dan jadi kita tidak akan melakukan Bagian lain dari tantangan.
Anda dapat melakukannya sendiri.
Tapi pada dasarnya, Anda harus mencoba dan membuat ini responsif
seperti baik membuat timeline item, sendiri, responsif.
Jadi sekarang kita sudah melalui semua yang perlu Anda ketahui
tentang sisi responsif dari Bootstrap.
Pertanyaan tentang responsif desain dengan Bootstrap
dan bagaimana Anda bisa pergi untuk melakukan itu?
Iya nih?
>> AUDIENCE: Apakah sama jika kami memiliki video tertanam
dan kami ingin mengontrol skala di mana was-- Video
ukuran video pergi dari laptop ke ponsel.
NEEL Mehta: Ya.
Lebih atau kurang.
Anda harus memberitahu video untuk mengambil sebanyak ruang seperti itu diberikan,
yang sedikit mengganggu kadang-kadang.
Tapi gagasan inti adalah sama.
Sebuah video, seperti objek lain di halaman, seperti tombol atau apa pun,
selama Anda menggunakan kolom dan baris,
Anda dapat memberikan sejumlah ruang.
Dan mendapatkan itu untuk menghormati yang merupakan pertanyaan yang berbeda karena seperti YouTube
embeds memiliki tertentu, ukuran disukai.
Tapi secara teoritis di Setidaknya, itu akan berhasil.
Keren?
>> AUDIENCE: Saya kira itu, untuk gambar, Anda benar-benar melakukan
harus memiliki versi yang berbeda dari gambar yang sama dalam berbagai ukuran
untuk laptop dibandingkan iPhone?
Ya Pertanyaannya adalah, apakah kita perlu memiliki gambar yang responsif juga.
Dan memang, Anda bisa melakukan itu.
Saya pikir itu di CSS.
Tapi Bootstrap memungkinkan Anda untuk melakukannya juga.
Anda dapat memiliki gambar responsif.
Anda dapat memiliki gambar Anda mengubah ukuran sesuai dengan ukuran halaman.
Dan ada hal yang sangat baru HTML5, versi terbaru dari HTML,
dan CSS3, yang terbaru versi CSS, yang
akan membiarkan Anda meminta gambar yang berbeda didasarkan pada ukuran layar Anda berada di.
Biasanya, itu cukup baik untuk hanya memiliki gambar Anda hanya mengecilkan atau tumbuh
Namun besar itu perlu.
Tapi Anda bisa, jika Anda ingin untuk, memiliki satu 32 32
untuk layar yang sangat kecil, dan 64 oleh 64 untuk layar besar,
dan kemudian melayani mereka selektif.
Kamu bisa melakukannya.
Ini dilakukan oleh beberapa orang.
Itu masih cukup canggih.
Tapi jawaban singkat, images-- responsif Bootstrap dapat menyimpan hari di sana.
Keren?
>> AUDIENCE: Terima kasih.
>> NEEL Mehta: Jadi mari berbicara sangat cepat tentang bagaimana
untuk mendapatkan ini di halaman web Anda sendiri.
Katakanlah Anda ingin membuat Anda situs sendiri menggunakan Bootstrap.
Dan jadi mari kita hanya berjalan melalui itu bersama-sama.
Katakanlah Anda membuat hanya halaman HTML biasa.
Jangan ragu untuk mengikuti di apapun editor favorit Anda.
Jadi kita hanya memiliki beberapa halaman HTML.
Kita bisa melakukan! DOCTYPE html.
Ini juga html, halaman kami.
Tidak ada yang baru.
Kami telah melakukan ini sebelumnya.
Jadi di sini kita memiliki HTML dan kita bisa menempatkan barang-barang di dalam sini.
Kita dapat memiliki tombol kita.
Dan seperti yang saya katakan sebelumnya, ini belum tentu akan bekerja.
Mengapa ini tidak bekerja?
Mengapa kita tidak akan mendapatkan kami bagus, tombol warna-warni?
>> AUDIENCE: Karena kita tidak menghubungkannya untuk proyek Bootstrap atau file?
NEEL Mehta: Ya.
Benar.
Karena Bootstrap-- itu hanya file CSS mewah.
Ini adalah serangkaian gaya yang melekat pada elemen Anda.
Di sini kita sudah bilang bahwa kita ingin menggunakan gaya ini.
Aku akan ukuran yang up sedikit.
Kami telah diberitahu itu kita ingin menggunakan gaya ini, tapi kami tidak pernah
diberitahu itu apa gaya yang.
Dan itulah yang Anda pertanyaan dari sebelumnya adalah.
Itulah jawaban untuk itu.
Kita perlu menemukan cara untuk mendapatkan gaya dan memasukkan mereka dalam halaman kami entah bagaimana.
Dan akan jadi Bootstrap menunjukkan kepada kita bagaimana untuk melakukan itu.
>> Jadi, jika Anda pergi ke atas di sini, Persiapan.
Ada berbagai cara untuk mendownloadnya.
Ini mungkin tidak masuk akal tentu.
Bootstrap-- ini akan membiarkan Anda ambil file CSS itu sendiri.
Dan Anda termasuk dalam halaman Anda sendiri.
Source Code adalah jika Anda ingin hack di atasnya sendiri.
Anda tidak perlu ini benar-benar.
Sass adalah bahasa yang mengkompilasi ke CSS.
Anggap saja sebagai sebuah preprocessor.
Seperti PHP adalah preprocessor dari HTML, Sass adalah preprocessor untuk CSS.
Jadi jika Anda ingin melakukannya dengan cara itu, Anda bisa melakukan itu.
>> Cara termudah adalah menggunakan CDN, atau jaringan pengiriman konten.
Ini sebuah website yang hanya menyajikan salinan Bootstrap
sangat cepat bagi Anda untuk termasuk di halaman Anda sendiri.
Jadi, inilah contoh.
Ini akan memberi Anda elemen link ini.
Sebuah elemen link memberitahu browser Anda, mengambil file apapun disimpan di sini
dan memasukkannya dalam halaman web kami.
Dan dalam hal ini, itu file CSS Bootstrap.
Jadi kami hanya akan menyalin URL, atau teks itu, dan kami akan membuangnya di dalam
dari kepala kita.
>> Dan aku tidak akan memulai halaman untuk ini, tetapi Anda dapat percaya bahwa ini bekerja.
Link akan membuat Anda CSS.
Memasukkannya dalam Anda Halaman dan kemudian Anda akan
dapat menggunakan semua Bootstrap kelas yang Anda kenal dan cinta.
Jika Anda ingin tetap lokal dan memilikinya pada sistem file Anda sendiri
daripada harus pergi ke internet untuk meraihnya,
seperti jika Anda ingin menggunakan situs offline,
Anda dapat menggunakan opsi Download.
Tetapi untuk sebagian besar, menggunakan CDN cukup cepat karena dengan cara itu,
itu terus diperbarui untuk Anda juga.
Anda harus memperbarui secara manual baik.
Masuk akal?
>> Jadi banyak alat akan dibangun ini di secara default. Dalam Pset7 dan Pset8,
Saya percaya Bootstrap adalah otomatis disertakan.
Dan di CodePen, untuk Misalnya, itu sudah
termasuk karena saya menambahkan menambahkan pengaturan itu.
Jadi, jika Anda pernah ingin bermain-main dengan itu, Anda hanya dapat pergi CodePen,
atau pergi pada ID Anda, atau apa pun.
Dan Anda mungkin bisa Akses Bootstrap ada,
tapi itu tidak selalu dibangun di, secara default, untuk web.
Masuk akal?
>> Iya nih.
hanya sebagai recap-- kita memiliki seperti lima menit lagi.
Tetapi sebagai rekap, di halaman web baru, Anda dapat menyertakan Bootstrap seperti ini.
Dan sekali Anda memiliki itu termasuk, Anda dapat melakukan semua hal menyenangkan di sini.
Anda dapat pergi pada, dan Anda hanya dapat membaca dengan teliti CSS, Anda dapat menambahkan beberapa gaya keren,
Anda dapat memiliki komponen seperti tombol,
dan tabel, dan daftar item yang kami sebutkan.
Ada beberapa plugin JavaScript keren, yang mungkin Anda ingin menjelajahi.
Mereka menambahkan beberapa keren interaktivitas ke halaman web.
Seperti ini membuat dialog modal.
>> Jadi ada beberapa hal menyenangkan Anda bisa lakukan dengan Bootstrap.
Jadi saran saya kepada Anda adalah pergi ke depan dan menggunakannya dalam proyek-proyek Anda sendiri,
ikuti petunjuk kami hanya melakukan bagaimana untuk mendapatkannya,
dan hanya membaca Bootstrap karena Anda akan belajar lebih banyak tentang apa yang harus dilakukan.
Dan kita sudah lebih, hari ini, bagaimana menggunakan
dokumentasi, apa bangunan blok, dan bagaimana hal itu secara konseptual.
Jadi sekarang tantangan saya kepada Anda adalah membuat website menggunakan Bootstrap.
Pergilah ke docs.
Dan menggunakan alat-alat yang kita punya pelajari sejauh untuk mencoba dan menguraikannya
dan memahami mereka.
Dan menggunakan mereka gaya dan alat-alat Anda melihat ada di website Anda.
Dan itu hanya besar, proses eksperimental.
>> Mencoba gaya tertentu.
Apakah itu bekerja?
Apakah tidak?
Cobalah menempatkan hal bersama-sama.
Lihat apa yang terjadi.
Ini sangat banyak diri dipandu, proses penemuan.
Tapi hari ini, kita telah belajar sangat dasar-dasar apa yang Bootstrap?
Mengapa tidak bekerja?
Bagaimana cara kerjanya?
Bagaimana kita mulai menggunakan itu, di tempat pertama?
Dan sekarang bahwa Anda lebih punuk itu, Anda
harus dapat melakukannya cukup lancar sendiri.
>> Jadi sekali lagi, semua Kode yang kita lakukan di sini.
Jadi, jika Anda pernah ingin untuk mendapatkan kuas pada,
seperti, apa cheat cepat lembar untuk semua gaya?
Anda dapat pergi ke sampel ini di sini.
Kami memiliki beberapa gaya contoh di sini.
Jika Anda ingin mencoba tantangan lagi sendiri,
Anda dapat mencobanya di sini dan memeriksa solusi.
Jadi link ini akan termasuk pada slide, yang
akan dikirim kepada Anda tentu saja.
Tapi itu juga di sini.
Anda dapat menghentikan video sementara, jika Anda ingin.
Semua informasi yang Anda butuhkan adalah akan ada di sini, di situs ini.
Jadi jika seseorang memiliki pertanyaan, kita bisa membawa mereka selama beberapa menit berikutnya.
Jika tidak, terima kasih semua sangat banyak untuk menonton.